How to make a vertical line in CSS

Learn how to create a vertical line in CSS using the border-left property, with an example.

Making a Vertical Line in CSS

You can create a vertical line in CSS using the border-left and border-right properties of an element. To create a vertical line, you can set the height and width of the element to a fixed pixel value, and then set the border-left and border-right properties to the same pixel value.

For example, the following code will create a vertical line that is 1000 pixels in height and 1 pixel in width:

.vertical-line {
    height: 1000px;
    width: 1px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

You can also use the ::before and ::after pseudo-elements to create a vertical line. This is especially useful when you want to create a vertical line that is not a fixed size. For example, the following code will create a vertical line that is the same height as the parent element:

.vertical-line {
    position: relative;
}

.vertical-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #000;
}

You can also use ::after to create a vertical line that is the same width as the parent element. For example, the following code will create a vertical line that is the same width as the parent element:

.vertical-line {
    position: relative;
}

.vertical-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #000;
}

These are just a few examples of how you can create a vertical line in CSS. You can also use other CSS properties and values to create a vertical line, such as box-shadow or outline. With a little bit of creativity, you can create a variety of vertical lines in CSS.