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

Incorporating Line Breaks into Pseudo-Element Content

Adding multiple lines to the content property of ::after or ::before pseudo-elements can enhance readability and formatting. However, executing this operation solely through CSS presents a challenge.

Using the "A" Escape Sequence

The content property documentation suggests using the "A" escape sequence to include newlines within the generated content. This inserted line break adheres to the 'white-space' property.

To illustrate its application, consider the following example:

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

This code adds a line break between the "Office" and "Mobile" text, formatting the content into multiple lines. See the live demonstration at http://jsfiddle.net/XkNxs/.

Cautionary Note

When escaping arbitrary strings, utilize "

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