How to Add Line Breaks to Pseudo-Element Content Using CSS?

Adding Line Breaks to Pseudo-Element Content Using CSS

Introduction

When adding text via ::after or ::before pseudo-elements in CSS without access to HTML or PHP, the need arises to include line breaks for multi-line content. This article addresses how to achieve this using CSS.

Adding Line Breaks

To add line breaks in the content property, use the "A" escape sequence. However, the inserted line break is subject to the "white-space" property.

Example

To illustrate, consider the following code:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

This will add a line break after "XXXXX" and display the content as:

Office: XXXXX
Mobile: YYYYY

Alternative Escape Sequence

If you encounter unpredictable results when using A, it's advisable to use

The above is the detailed content of How to Add Line Breaks to Pseudo-Element Content Using CSS?. For more information, please follow other related articles on the PHP Chinese website!