CSS data attribute new line character & pseudo-element content value

Question

Is it possible to have a new line in a data attribute ?

I am trying to do something like this:

CSS:

[         


        

Answer 1

You can use a plain line break inside an attribute value:

foo

Browsers have been buggy in this respect, and the HTML specifications have not been quite clear on this; they discuss the meaning of line breaks in element content (where they are taking as equivalent to spaces), but not in attribute values. In HTML5 CR, the parsing rules for attribute values make it clear that line breaks are simply added to the attribute value. Modern browsers generally play by such rules.

However, when you use the value in CSS via attr(...), the line break will normally be treated as equivalent to a space, so you need to set white-space on the pseudo-element to a value that makes line breaks honored, namely pre, pre-wrap, or pre-line.

P.S. In HTML, the notation \a is just two data characters, with no special meaning. The notation would denote a line break (specifically, LINE FEED), but it would be just equivalent to an actual line break in souce.