W3docs
en
Log in

How to Add Line Break Before an Element with CSS

In this tutorial, we’re going to show some ways of adding a line break before an element. For that, use the white-space property and ::before pseudo-element.

Tags

In this tutorial, we’ll show some ways of adding a line break before an element. This can easily be done with a few steps.

We need to use the CSS white-space property to specify how the space inside an element must be handled. Particularly, we’ll use the "pre" value of this property.

Start with creating HTML.

Create HTML

  • Use an <h1> element and three <p> elements.

How to Add a Line Break Before an Element with CSS

<h1>W3Docs</h1>
<p>Books</p>
<p>Quizzes</p>
<p>Snippets</p>

Add CSS

  • Use the ::before pseudo-element.
  • Add a carriage return character (\A) in the content.
  • Set the white-space property to "pre".

How to Add a Line Break Before an Element with CSS

p::before {
  content: "\A";
  white-space: pre;
  display: block;
}

Here, you can see the full code.

Example of adding a line break before p elements with the :before pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::before {
        content: "\A";
        white-space: pre;
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
    <p>Books</p>
    <p>Quizzes</p>
    <p>Snippets</p>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mb-5">Books

Quizzes

Snippets

</div>

In the next example, a line break before an element is also added with the :before pseudo-element and by using the carriage return character and the display property set to the “block” value. Note that setting display to block makes the pseudo-element a block-level box, which forces it onto a new line. Here, we use <span> elements.

Example of adding a line break before span elements with the :before pseudo-element:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span::before {
        content: "\A";
        white-space: pre;
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>W3Docs</h1>
    <span>Books</span>
    <span>Quizzes</span>
    <span>Snippets</span>
  </body>
</html>
Try it Yourself »