Can CSS Data Attributes Render Newline Characters with Pseudo-Elements?

CSS Data Attributes, Newline Characters, and Pseudo-Element Content Values

Can you incorporate newline characters within CSS data attributes, allowing them to be displayed using pseudo-elements? Let's explore this scenario.

Consider the following CSS and HTML code:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

In this scenario, the "a" character, expected to be a newline character in CSS, fails to produce the desired result.

Solution:

To achieve the desired behavior, modify the data attribute as follows:

<div data-foo="First line &#xa; Second Line">foo</div>

Explanation:

• The notation represents a newline character in HTML.
• The addition of a whitespace property to the pseudo-element, achieved through the "white-space: pre;" style, preserves the whitespace within the data attribute.
• The "display: inline-block;" style allows the pseudo-element to wrap over multiple lines.
• As a result, the content of the data attribute, including the newline character, is rendered as expected.

The above is the detailed content of Can CSS Data Attributes Render Newline Characters with Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!