a shot of dev knowledge

RELATED TAGS

How to add a line-break using CSS

A line-break can be added in HTML, using only CSS, by employing the pseudo-class ::after or ::before. In the stylesheet, we use these pseudo-classes, with the HTML class or id, before or after the place where we want to insert a line-break.

In myClass::after:

  1. Set the content property to "\a" (the new-line character).
  2. Set the white-space property to pre. This way, the browser will read every white-space, in myClass, as a white-space.

Examples

1. HTML without a line-break:

Without line-break

2. Using ::after to insert a line-break:

Using ::after

3. Using ::before to insert a line-break:

Using ::before
svg viewer
How ::after and ::before are used

RELATED TAGS

RELATED COURSES

View all Courses

Keep Exploring