MoreLesson 261Free preview

Text Divider

This lesson is part of How To · All levels

Summary

A text divider is a horizontal line in the middle of which there is text, such as 'or' on a form. Modern techniques use flexboxes: text becomes the middle item, while lines are made with pseudo-elements::before and::after that fill the remaining space. The result is smooth as the screen width changes.

Key points

Flexbox with align-items: center aligns text and lines vertically.
Pseudo-element::before and::after with flex: 1 filling the space on the left and right.
Gaps provide a distance between lines and text.
The text of the divider should be wrapped in elements so that it can be easily set and accessible.

Full lesson

Code examples and quizzes

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