Vertical Rule (As Opposed to <Hr>) in CSS

Vertical rule (as opposed to hr) in CSS

for this you basically need to setup a place to put it and a div statement works.

 <div style="width:150px;height:2px;background-color:#000000;"> </div>

this could also be referenced:

 .hr {width:150px;height:2px;background-color:#000000;} // in your css file/script

 <div class="hr"> </div> <!-- IN HTML -->

You can change the position and have it going up/down or left/right with css placement and z-index

 .hr {width:2px;height:150px;background-color:#000000;position:absolute;top:0px;left:50px;z-index:10;} // in your css file/script

basically

 width            = how wide you want it
 height           = how tall you want it
 background-color = is the color you want it to be
 position         = absolute, relative, float - basically if it stays in one place or moves with page content
 top              = where to place in reference to top of page - could be margin-top
 left             = where to place in reference to left of page - could be margin-left

Is there a vr (vertical rule) in html?

No, there is no vertical rule.

EDIT: It's 2021 (twelve years after I answered this question), and I no longer think my original explanation is true:

(original explanation)
It does not make logical sense to have one. HTML is parsed
sequentially, meaning you lay out your HTML code from top to bottom,
left to right how you want it to appear from top to bottom, left to
right (generally)
A vr tag does not follow that paradigm.

I'm not sure why a VR tag was never introduced, but it's likely not because of the way HTML is parsed - there are many different layout modes in HTML/CSS now that do not follow this "paradigm".

If I were to now speculate as to why there is no VR tag, I might look at MDN's definition of the HR tag as a clue:

The HTML <hr> element represents a thematic break between
paragraph-level elements: for example, a change of scene in a story,
or a shift of topic within a section.

In practice, however, the <hr> tag often ends up used for things other than it's semantic meaning. Although it may seem based on it's real world use that there should be a <vr> tag, it probably would not resemble anything related to the semantic definition of the <hr> tag. It was probably never thought to be introduced.

My hunch is that the creators would suggest that the domain of the solution for this problem lies in CSS, not HTML (and most of the answers to this SO question reflect that).

Nixinova's solution looks like the most elegant and modern solution to this problem.

(The rest of my old answer follows below):

This is easy to do using CSS, however. Ex:

<div style="border-left:1px solid #000;height:500px"></div>

Note that you need to specify a height or fill the container with content.

How to make a vertical line in HTML

Put a <div> around the markup where you want the line to appear to next, and use CSS to style it:

.verticalLine {  border-left: thick solid #ff0000;}

<div class="verticalLine">  some other content</div>

Creating a horizontal rule (HR) divider that contains text with Tailwind CSS

You can use this HTML syntax to create what you want :

<div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-gray-400"></div>
    <span class="flex-shrink mx-4 text-gray-400">Content</span>
    <div class="flex-grow border-t border-gray-400"></div>
</div>

See here the result: https://play.tailwindcss.com/65JULZ5XES

How do I make a hr / tag go vertically

This will require changes to more than just the hr. the element above and below it must be floated. the effect can be achieved with a solid border:

<div class="section1"> content </div> 
<div class="section2"> more content </div>

CSS:

.section1 {  
    float: left; 
    width: 200px; 
    border-right: 1px solid #333;
}

.section2 { 
    float: left; 
    width: 200px;
}

Edit: see also this answer

Vertical hr tag

There is no "Vertical" hr tag. You can use "border-left" and "border-right" css properties to get such an effect.

HR (vertical line) stretches the rest of the table

Use rowspan="" to strech <hr> to way down,

<td rowspan="4">
  <hr>
</td>

Here's your updated code, https://jsfiddle.net/he84kv8n/10/

How can I draw red horizontal line in React

One way to set up the component:

const ColoredLine = ({ color }) => (
    <hr
        style={{
            color: color,
            backgroundColor: color,
            height: 5
        }}
    />
);

And then use it with:

<ColoredLine color="red" />

For a full breakdown on how to style <hr />, see http://www.sovavsiti.cz/css/hr.html

How do I change hr/ tags to vertical lines on larger screens?

try this using media query to hid the hr and then just add a left border, change the min-width: 600px to match the screen size you are targeting

test here on jsfiddle

@media only screen and (min-width: 600px) {
  hr {
    display: block;
    visibility: hidden;
  }
  div.p-4 {
    display: block;
    border-right: 1px solid #C8C9CA;
  }
  
  div.p-4:last-child {
    border-right: none;
  }
}

<!-- just added bootstrap for testing - CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="row">
    <div class="col-md-4 col-sm-6 p-4">
        <h2>Have a Question?</h2>
    </div>
    <div class="col-md-4 col-sm-6 text-center p-4">
        <hr/>
        <h3>FAQs</h3>
        <p>Get more information about ordering, payments and product delivery.</p>
    </div>
    <div class="col-md-4 col-sm-6 text-center p-4">
        <hr />
        <h3 class="mb-4">Call Us</h3>
        <p>Contact our product specialists</p>
    </div>
</div>

Vertical Rule (As Opposed to <Hr>) in CSS