Skip to main content
X

Explore your training options in 10 minutes

Create Line Breaks Without Having to Use br in HTML

Christina Kopecky - July 02, 2020


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.

Get offers and scholarships from top coding schools illustration

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.

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.

What's Next?

Christina Kopecky

About the author: Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.

Skip to main content