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:**

<html>
 <head>
 </head>
 <body>
 The first line.The second line.
 </body>
</html>

codemirror

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

#content1::after{
    content: "\a";
    white-space: pre;
}

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

#content2::before{
    content: "\a";
    white-space: pre;
}

How to add a line-break using CSS

Examples