To create a vertical line using HTML and CSS, you can set a CSS rule for <hr> tags with the class vertical as follows:
hr.vertical {
border: 0;
margin: 0;
border-left: 5px solid blue;
height: 200px;
float: left;
}
First, you need to normalize the default border and margin properties added by the browser.
Next, the width, style, and color of the vertical line is set using the shorthand border-left property, while the height property will set the height of the vertical line.
The float:left property is added so that the vertical line can be displayed on the left side of another element.
The following HTML markup:
<body>
<hr class="vertical" />
<p>Hello World</p>
</body>
Will produce the following output:
Alternatively, you can also remove the <hr> tag and create a vertical line by adding a border-left or border-right property to any element that you want to have a vertical line.
For example, here’s how to add a vertical line on the right side of the <p> tag:
p.vertical-right {
border-right: 5px solid blue;
height: 50px;
}
The example below:
<body>
<p class="vertical-right">Hello World</p>
<p class="vertical-right">Goodbye World</p>
</body>
Will produce the following output:
You will need to adjust the CSS style depending on the context and where you want to place the vertical line. But a vertical line can always be created using the <hr> tag.
If you need to add the vertical line on the side of another element, you can use either the border-left or border-right property with the attached element.