Reputation: 14891
I'm using a framework where I can add attributes to an element, but can't add dom elements myself. What I'm trying to do is add two lines of content to the :before
pseudo-element, then make the first line bold.
[data-text]::before {
content: attr(data-text);
display: block;
white-space: pre;
}
[data-text]::first-line {
font-weight: bold;
}
<div data-text="Here's some text.
Here's a new line with more text.">
...
</div>
This effect works exactly as I want it to in Chrome, Edge and IE11 (which was a shock), but not in Firefox (also a shock). Why does Firefox not bold the first line while the other browsers do? How do I get the first line bolded?
Upvotes: 2
Views: 616
Reputation: 471
Hey can you try like this;
[data-text]::before {
content: attr(data-text);
/*display: block;*/
white-space: pre;
}
[data-text]::first-line {
font-weight: bold;
}
<div data-text="Here's some text.
Here's a new line with more text.
">
...
</div>
Upvotes: 2