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

Adding Line Breaks to ::after or ::before Pseudo-Element Content

Question:

How do you add multiple lines to the content property of a ::after or ::before pseudo-element when access to the markup is limited to CSS?

Answer:

The 'content' property allows line breaks to be inserted using the "A" escape sequence. However, to prevent line wrapping, set the 'white-space' property to 'pre' or 'pre-wrap'.

Example:

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

For more robust escaping, use "

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