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:

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

HTML

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

I found that "\a" is a new line in CSS, but still does not work for me.

\a works if you place it directly in the content: "First line \a Second Line"; but seemingly not if you pull it in via attr(). Wow, interesting question! — ralph.m
– ralph.m, Commented May 9, 2013 at 1:18
I created a demo to test the two solutions: plain newline, and 
 entity. codepen.io/denilsonsa/pen/bgxKgP Summary: both solutions work on all modern browsers (Chrome, Firefox, Safari 9+, IE 11+). — Denilson Sá Maia
– Denilson Sá Maia, Commented Feb 8, 2017 at 12:06

Gangula · Accepted Answer · 2021-11-02 17:35:22Z

91

Here is how this can work. You need to modify your data attribute as follows:

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

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

Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/

How It Works

Using \a does not work, but the equivalent HTML entity does, 
.

According to the CSS2.1 spec, attr(attribute-label) returns a string but the string is not parsed by the CSS processor (I am not sure what this means exactly). I speculate that \a must be interpreted by the CSS processor in order for the code to be displayed property.

In contrast, the HTML entity is interpreted by the browser directly (I guess...) so it appears to work.

However, for the line feed to work, you need to set white-space: pre to preserve the white space in the pseudo-element. Note: you may also consider namely pre-wrap, or pre-line depending on the nature of your content.

Reference

Regarding getting the HTML entity code for a linefeed:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Regarding the attr() value for the content property:
http://www.w3.org/TR/CSS2/generate.html#content

edited Nov 2, 2021 at 17:35

Gangula

7,8005 gold badges53 silver badges95 bronze badges

answered May 9, 2013 at 1:22

Marc Audet

47k11 gold badges68 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SYNCRo Over a year ago

Any idea why using jQuery $("[data-foo]").attr("data-foo", "First line 
 Second Line") is not working? It just displays "First line 
 Second Line".

norbidrak Over a year ago

Same problem as @SYNCRo had, it's not working, if it's assigned from js variable to attribute.

jorisw Over a year ago

white-space: pre makes \n work for me too.

Jukka K. Korpela · Accepted Answer · 2013-05-09 07:25:10Z

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

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

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.

vivek sharma · Accepted Answer · 2021-06-04 05:42:00Z

0

To add a new line in Tooltips

<tr>
<td>RFC</td>
<td>
<span class="rcftip" tabindex="0" data-descr="AD001: Non Aadhar XML 
journey &#13;&#10;BU001: DPDs in Bureau, Low score and related issues         
&#13;&#10;BU002: Presence of default qualifiers &#13;&#10;INC001: Low 
reported Income &#13;&#10;INC002: Low Income as per SMS &#13;&#10;INC003: 
Low Income as per Bank Statement &#13;&#10;EL001: Eligibility less than 
defined &#13;&#10;M001: Name match failed in KYC &#13;&#10;M002: Name 
match failed in Telco &#13;&#10;M003: Name Match failed in Address proof 
&#13;&#10;M004: Face match failed &#13;&#10;M005: Distance match failed 
&#13;&#10;M006: No Local address found">
<span th:if="${user.rfc != null}" th:text="${user.rfc}"></span>
</span>
</td>
</tr>

In CSS

span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}

.rcftip:after {
content: '\A';
white-space: pre;
word-wrap: break-word;
}

Result: tooltips with new line

answered Jun 4, 2021 at 5:42

vivek sharma

291 gold badge1 silver badge9 bronze badges

1 Comment

jorisw Over a year ago

Rather than just showing code, it's more helpful if the core of the solution is elaborated upon, then demonstrated with a minimal example.

SeanCheey · Accepted Answer · 2024-11-25 08:01:49Z

0

For any of you who are using frameworks like svelte (maybe vue), notice that you should not declare an explicit 
 character in your codebase, cuz it's treated not as-is during compilation. Instead, Simply declare a \n character, make sure it's quoted/treated as a variable. For example:

data-tooltip={"Line one\nLine two"}

Along with

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

answered Nov 25, 2024 at 8:01

SeanCheey

3893 silver badges6 bronze badges

Comments

Eric Norcross · Accepted Answer · 2016-12-31 03:19:27Z

-1

...and if you're trying to figure this out and happen to be using HAML and AngularJS then use \n.

%a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "}

results in:

Cost Per Unit: $10.54
(Calculated for applicable Feature Qty.)

answered Dec 31, 2016 at 3:19

Eric Norcross

4,3165 gold badges31 silver badges55 bronze badges

Comments

Lokesh Gamot · Accepted Answer · 2017-02-23 11:10:01Z

-6

Okay, Here is one easy way to do this. you should write it as

data-foo='First line </br> Second Line'

and instead of using .text(), you can use .html(). when you use .html() then it will take as line break and this should solve your problem.

answered Feb 23, 2017 at 11:10

Lokesh Gamot

484 bronze badges

1 Comment

jorisw Over a year ago

</br> is not valid HTML, much less when put into an attribute value.

Collectives™ on Stack Overflow

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

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related