Create a vertical line using Html and CSS

In this article, we will discuss the process of creating a vertical line using HTML and CSS, exploring the various ways and styles that we can utilize to achieve the design we want with vertical lines.

So the three CSS methods we will explore in this article to create a vertical line are :

Using CSS border property
Using border property with absolute positioning
Using transform property.

Let’s check each technique with an example.

Create vertical line with border property

We can create a vertical line in CSS by using the border-left or border-right property with an HTML element.

Here is an example of a vertical line with a width of 100px, a height of 300px, and a black background.

  <body>
     <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat,
      impedit!
      </p>
    <div class="vertical-line"></div>
  </body>

Now add the CSS property.

.vertical-line {
     width: 100px; /* width of the line */
     border-left: 2px solid black; /* border-left property */
     height: 300px; /* height of the line */
 }

Result:

Using pseudo-classes and position absolute

To create a vertical line with more flexibility we can use the pseudo-classes and absolute positioning. This method will give greater control over the placement and styling of the line.

To create a vertical line with this method we have to use the pseudo-classes such as :before and :after along with the absolute position property.

Here is an example of creating a simple vertical line using pseudo-class and absolute position.

<div class="container">
  <div class="vertical-line"></div>
</div>

Now add the CSS properties to vertical-line class.

<style>
    .container {
      position: relative;
      width: 100%;
      height: 300px;
      background-color: lightpink;
    }

    .vertical-line::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 2px;
      background-color: black;
    }
  </style>

Result:

In the example, we have defined a .container class with position relative and inside it we have the .vertical-line class. Next, we use the :before pseudo-class to create the vertical line, by setting its position to absolute and using top, bottom, and left properties to position the line vertically in the middle of the container.

And finally, we set the width to 2px and gave a black background color to the line.

Using rotate transform property

Another way to create a vertical line is to use the rotate transform property.

The rotate property allows us to rotate an element by a specified number of degrees. and by combining it with width and height properties we can create a vertical line.

First, we will create a horizontal line with a defined width and height and then using the rotate property we will rotate it by 90 degrees.

Here is an example to create a vertical line with the rotate property.

<div class="container">
  <div class="vertical-line"></div>
</div>

Now the CSS properties.

<style>
     .container {
      background: lightcoral;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .vertical-line {
      background-color: black;
      height: 2px;
      width: 300px;
      transform: rotate(90deg);
    }
  </style>

Result:

In the above example, we have created a container with a specific height and used flex properties to center the child element to the center of it.

Next, we have create the class .vertical-line with width and height in pixels and added a black background color to it, and then used the transform property to rotate the line by 90 degrees, making it a vertical line.

We can also use the <hr/> HTML element to create a horizontal line and then using the rotate transform property, we can create a vertical line.

hr{
    transform: rotate(90deg)    
}

Conclusion:

In conclusion, we can say there are lots of ways to create a vertical line in HTML including using CSS border, transform, and pseudo-classes. You can choose any of the given methods as per your need on your webpage.

Create vertical line with border property

Using pseudo-classes and position absolute

Using rotate transform property

Related Posts