How can I add line breaks to pseudo-element content using data attributes in CSS?

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

This query explores the possibility of incorporating new line characters into CSS data attributes. The user aims to display multi-line content using the content property of a pseudo-element and the value extracted from the data attribute.

Implementation

The initial approach, utilizing "a" as a new line character within the data attribute, proved unsuccessful. To achieve the desired result, the following modifications are necessary:

Data Attribute Modification:

• Replace "a" with " "; this HTML entity corresponds to a line break character.

CSS Modifications:

• content: attr(data-foo);: Maintain the original functionality of displaying the data attribute's content.
• background-color: black; white-space: pre; display: inline-block;: Ensure that the content retains its formatting and displays as a discrete block.

Final Code:

CSS:

HTML:

This modification allows the pseudo-element to display the multi-line content, preserving the line breaks as defined in the data attribute.

The above is the detailed content of How can I add line breaks to pseudo-element content using data attributes in CSS?. For more information, please follow other related articles on the PHP Chinese website!