With content: attr(attribute-name)
it is possible to add a pseudo element (:before
or :after
) with text content from an element's attribute. Besides that the content
property of the pseudo element does allow new lines via the A
character within the content of the pseudo element, too:
content: attr(attribute-name1) 'a' attr(attribute-name2)
What I now want is to be able to control the position and existence of newline characters within the value of a single attribute containing a multi line text. The text is defined by the user and thus out of my control.
Element:
<span data-usertext="Some random text with a some newlines"/>
CSS:
span:after {
content: attr(data-usertext);
white-space: pre;
}
Sadly this does not work: The a
is printed out as if it is a simple character sequence. I also tried r
, n
and <br />
out of curiosity.
How can I get the newlines from the attribute interpreted as such without using Javascript?
A fiddle I used to try around: https://jsfiddle.net/dWkdp/3039/