Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

add
line break
css
html

How to add a line-break using CSS

Educative Answers Team

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

add
line break
css
html
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring