How to add a line-break using CSS
Line breaks are necessary not just for formatting text but also for providing clarity and structure to our content. They serve as pauses, allowing readers to absorb information more effectively and preventing overwhelming blocks of text.
In HTML, a line break can be inserted using CSS through the pseudo-classes ::after or ::before. To achieve this, we utilize these pseudo-classes in the stylesheet, associating them with the HTML class or id, either before or after the desired location for the line-break. Additionally, the display property in CSS offers another method for adding a line break.
Examples
Let’s explore these methods with examples:
1. HTML without a line-break:
In the following code example, we'll explore HTML content where lines without breaks.
2. Using ::after to insert a line-break:
We defined IDs (content1 and content2 for both span elements in the HTML tab. For CSS, we used the ID of the first span and the ::after pseudo-class. Within this class, we defined the following CSS properties:
Set the
contentproperty to"\a"(the new-line character).Set the
white-spaceproperty topre. This way, the browser will read every white space, incontent1, as a white-space.
3. Using ::before to insert a line-break:
In the following code, we used the ID of the second span and the ::before pseudo-class. Within this class, we defined the following CSS properties:
Set the
contentproperty to"\a"(the new-line character).Set the
white-spaceproperty topre. This way, the browser will read every white-space, incontent2, as a white-space.
4. Using the display property
In the following example, we used the CSS display property, setting it to block for block-level elements will cause each element to start on a new line.
RELATED TAGS
