How to Insert Line Breaks in ::after or ::before Pseudo-Element Content?

Line Breaks in ::after or ::before Pseudo-Element Content

Customizing the content of ::after or ::before pseudo-elements in CSS can enhance the presentation of elements. However, inserting multiple lines in the content property poses a challenge.

To address this challenge, CSS provides a mechanism to include line breaks using the "A" escape sequence. The rule below demonstrates how:

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

By specifying the "white-space" property as "pre" or "pre-wrap," the line break is respected and displayed accordingly.

However, caution is advised when escaping arbitrary strings. Instead of "A," it's recommended to use "

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