MoreLesson 259Free preview

Vertical Line

This lesson is part of How To · All levels

Summary

Vertical lines are often used as a separator between columns, quotation marks, or accents on cards. The simplest way is to border-left or border-right on the container. For stand-alone lines, use elements with a clear small width and height, or pseudo-elements with absolute positions.

Key points

The left or right border makes a vertical line without any additional elements.
The independent line needs explicit heights to be seen.
Pseudo-element before is suitable for lines between repeating items.
Use a width of 1-2px and a color contrast enough to keep the lines from dominating.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.