How to Inject Multi-Line Text into CSS Pseudo-Elements?

Injecting Multi-line Text into Pseudo-Elements

When modifying a webpage's content solely through CSS modifications, it may be necessary to incorporate multi-line text into ::after or ::before pseudo-elements. While traditional HTML line breaks are not supported in this context, utilizing escape sequences provides a solution.

Solution

The CSS content property allows for the inclusion of line breaks by embedding the "A" escape sequence into the content string. However, the resulting line breaks remain subject to the 'white-space' property. Therefore, to preserve the multi-line format, it is crucial to set 'white-space: pre;' or 'white-space: pre-wrap;'.

For example:

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

Recommendation

For enhanced cross-compatibility, it is advisable to utilize the "

The above is the detailed content of How to Inject Multi-Line Text into CSS Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!