As per best practice, we can achieve this by using css border property either by border-left or by border-right. For drawing this, we will use the CSS border property on HTML tag i.e. span.
The following example will create three text components with a separator in between each component. Here we'll draw this with help of span and p tags and css properties i.e. border and height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Draw Vertical Line by using HTML</title>
<style>
.vrtcl-ln{
border-left: 1px solid #ccc;
height: 150px;
display: inline-block;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="dummy-block">
<p>Left Text of etutorialz</p>
<span class="vrtcl-ln"></span>
<p>right Text of etutorialz</p>
</div>
</body>
</html>
Supported Browsers:
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
HTML is base requirement for development of webpages. You can learn HTML from our HTML Tutorials and HTML Examples