Can Data Attributes in CSS Contain New Line Characters?

Handling New Line Characters in CSS Data Attributes and Pseudo-Element Content

Question:

Can a data attribute in CSS contain a new line character? Specifically, can the following CSS and HTML combination achieve this:

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

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

Answer:

It is indeed possible to have a new line in a CSS data attribute. The example provided, however, does not demonstrate the correct syntax. To achieve the desired result, you can follow these steps:

1. Modify Your Data Attribute:

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

In this updated HTML, the new line character (a) is replaced with the HTML entity . This entity represents a line feed (LF) character, which will create a new line in the content.

2. Adjust Your CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

In the CSS, add the following properties:

• white-space: pre; Preserves the whitespace in the content, including new lines.
• display: inline-block; Prevents the content from breaking the flow of the surrounding text.

This modified CSS ensures that the content of the data attribute, including the new line, is displayed as intended.

The above is the detailed content of Can Data Attributes in CSS Contain New Line Characters?. For more information, please follow other related articles on the PHP Chinese website!