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.
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.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
