CODEWITHSUNDEEP
cssfirefox
Richard Parnaby-King
Richard Parnaby-King

Reputation: 14891

How to Bold first line of :before content in Firefox?

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

Answers (1)

Eren Akkus
Eren Akkus

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

Related Questions