Thorough explanation of 4 methods to draw vertical lines with CSS!

There are frequent opportunities to draw lines in website production, such as decorations and separating elements.

Due to the fact that the line of sight moves from top to bottom, horizontal lines are used more often, but this does not mean that there are few opportunities to use vertical lines.

In this article, I will explain how to draw a vertical line with CSS.

Vertical lines are used to separate heading designs and elements.

In order not to write useless code, let’s master the method of drawing vertical lines with reference to this article.

Draw a vertical line using border

You can draw vertical lines with the border property.

Border is a property that draws a border around an element, and is one of the properties that must be learned.

A description example of the border property is as follows.

CSS
p {
border:1px solid #000000;
}

Specify the line width, line style, and line color as in the code above.

Line style values ​​include:

The simplest and most common way to draw a line is to use the border property.

However, “border” is a property that draws lines on all sides of the element, so not only vertical lines but also horizontal lines are drawn.

The properties that draw only vertical lines use ‘border-left’ and ‘border-right’ .

As the name suggests, “border-left” draws a line on the left side of the element, and “border-right” draws a line on the right side of the element.

Possible values ​​are line width, line style, and line color, similar to “border”.

For example:

HTML
<p></p>

CSS
p {
border-left:5px solid #000000; /**/
padding:2px 8px; /**/
}

In the above code, the margin is also set in addition to specifying the line.

If there is no margin, the contents of the element and the line will stick together, so be sure to set it when using border.

This description will result in the following display:

I now have a thick vertical line to the left of my text.

This design is often used for headline decoration .

Draw a vertical line using a background image

By using images, you can create a variety of expressions that cannot be done with “border”.

For example, border has values ​​that change the style of the line, such as dashed and dotted, but you can’t change the design details.

In that respect, the background image can draw the design line that you think.

For example, it is an image that combines such a dotted line and a dashed line.

Let’s set this as the background image.

HTML
<p><br><br><br></p>

Specify the image to use in “background-image”. Write the image you want to use in url().

Specify the repetition with “background-repeat”. This property is necessary because the original image is short and does not become a line.

“repeat-y” is vertical repetition.

If you specify “repeat-x”, the image will be repeated horizontally.

Also, if you specify “repeat”, it will be repeated both vertically and horizontally. Please be careful that the inside of the element is completely filled with the image and not a line.

“background-position” is a property that specifies the position of the background.

Specify “left” to draw a line to the left . “top” means to start the image from the top.

Specify the margin with “padding”.

The horizontal padding is the distance between the line and the edge of the element, not the distance between the line and the text. Lines are just the background of the element and do not affect the margins.

It should now look like this:

Such lines cannot be expressed with the “border” style specification.

If you want to be particular about the design of the lines, it is a good idea to use an image.

draw a vertical line using an empty element

Describe the element for drawing the vertical line in HTML.

Prepare an empty element near where you want to draw the line like this.

Here’s how to draw a line to the right of the text.

As it is, only two lines of text are displayed, so we will use CSS to specify a line.

“position:relative” is specified for “wrap” which is the parent element.

Don’t forget to use “position:absolute” on child elements.

The design and position of the line are specified for the element that actually becomes the line, the “border”.

“position:absolute” is a description that the placement position can be set freely.

By specifying this, you can freely specify the vertical and horizontal placement .

“top:20%” specifies the vertical position. The top edge is positioned at 20% of the total height.

In addition to top, there is a value called “bottom” that sets the base of alignment to the bottom.

“left:80px” specifies the horizontal position. Placed 80px from the left.

Use “right” to refer to the right.

“background” is originally a property that specifies the background, but here it is used as the line color.

“width” is a property that specifies the width of the element.

I specified 1px for the empty element, so it looks like a normal black line.

“height” is the height.

It can also be called the length of the line here. This cannot be expressed with “border”.

You can’t adjust the length because the line always fills the size of the element.

The display looks like this:

This method has the advantage of being able to freely specify the position and adjust the length of the line, but it deviates from the principle of expressing things with CSS.

This is because there is an empty element in the HTML that is made just to display the lines.

This doesn’t make any sense in context, so it’s not a good HTML description.

Draw a vertical line using pseudo-elements

A pseudo-element is a selector that can specify an element or range that does not exist on HTML .

For example, “before” before an element, “after” after it, and so on.

Although these are not described in HTML, CSS can be specified.

Let’s use pseudo-elements to describe drawing a line in the middle of two horizontal elements.

It uses pseudo-elements that don’t exist in HTML, so you don’t need an empty element just to draw a line.

The ul contains a description that aligns the li element with the “position: relative” necessary to use “position: absolute” in the child element.

A line was specified for the ul pseudo-element “before”.

“content” is a property that specifies the content of the pseudo-element.

This time, to prepare an empty pseudo-element for drawing a line, write “””” with no content .

Without it, the pseudo-element itself won’t be generated, so be sure to include it even if it’s empty.

“position:absolute” is a description that you can freely set the position to place it, just like with an empty element.

The horizontal position specification for “left” is the same as for empty elements, but this time we set it to “50%” to display a line in the middle.

‘top’, ‘background’, ‘width’ and ‘height’ are all the same as for an empty element.

li contains descriptions for adjusting the appearance of elements.

The display will now look like this:

The benefits of being able to adjust the position and length are the same as for empty elements.

And pseudo-elements don’t need to write unnecessary HTML.

Pseudo-elements are recommended over empty elements when drawing vertical lines with a high degree of freedom like this .

By the way, you can also specify a background image for pseudo-elements.

Just change the color specification of “background” to the image specification and set the repeat etc.

summary

I explained how to draw a vertical line with CSS.

Basically, “border” is used, but by using images and pseudo-elements, the range of expression can be expanded to various levels.

In order to choose the best method when drawing vertical lines, you have to know various methods.

Let’s actually code while looking at this article and improve the technology.