Create Line Breaks Without Having to Use br in HTML
A line break can be added to HTML elements without having to utilize a break return
<br>
by using pseudo-elements. Pseudo-elements are used to style a specific part of an element. Here we will use ::after to style an HTML element to add a line break.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS ::after With \a</title>
</head>
<style>
span {
padding: 1px 8px;
}
span::after {
content: '\a';
white-space: pre;
}
</style>
<body>
<div>
<span>Dumbledore</span>
<span>McGonagall</span>
<span>Snape</span>
<span>Trelawney</span>
</div>
</body>
</html>
In the code above, we use the pseudo-element
::after
on each inline element (represented by the span) to add a carriage return (represented by the “\a”) after the span’s line of text. The
::after
in this case has a content property and a white space property available for us to use.
Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
The ‘content’ property describes the stuff we want injected into the span. The white-space property tells us if we are to preserve the whitespace. Leaving this particular property off doesn’t interfere with the inline-block characteristic of the span. So we have to add this particular property to override that.
As you mess with styling and layout more and more, you will probably find the solution above is not necessarily the best solution. If you add padding of any sort and also background, you will see that those CSS properties tend to mess with where the background comes into play. See the code example below that illustrates the point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Line Break</title>
</head>
<style>
span {
padding: 1px 8px;
background: pink;
}
span::before {
content: "\A";
white-space: pre;
}
</style>
<body>
<div>
<p>Professor <span>Dumbledore</span></p>
<p>Professor <span>McGonagall</span></p>
<p>Professor <span>Snape</span></p>
<p>Professor <span>Trelawney</span></p>
</div>
</body>
</html>
There are other solutions that offer similar outcomes to this – where the background starts on the previous line and then does a carriage return with text on the correct background in the next line. The CSS property
box decoration break: clone
is one that comes to mind that can be added to the span class above to achieve a similar result, but doesn’t really give us the result we want.
Using block level elements like
<p>
or
<div>
is a tempting solution. But what about the times where you would like to use a different display value? This brings us to the table layout option.
In the code editor, in the span CSS selector, delete the properties there and replace it with display: table. Using this not only makes your code cleaner, but gives you exactly the layout you need to display the information. We are not using the table layout in the traditional sense, but it gives us exactly what we need to get the job done.
