Что не так с этим?
Проще говоря, с этим поведением проблем нет. Поведение Firefox также является правильным в соответствии со спецификациями.
Поведение псевдоэлемента ::first-line, когда первая строка является псевдоэлементом ::before, ::after, выборочно показано вспецификация [1] . Поэтому неудивительно, что все браузеры не ведут себя согласованно.
§ 4.1. Псевдоэлементы сгенерированного содержимого: :: before и :: after [1]
Как и с содержимым обычных элементов, сгенерированное содержимое ::before иПсевдоэлементы ::after могут быть включены в любые псевдоэлементы ::first-line и ::first-letter, применяемые к его исходному элементу.
Кроме того, поведение при применении стиля такое же, как написано на уровне селекторов3, что соответствует поведению Google Chrome [2] . И если вы не применяете стили к соответствующим элементам, он работает как Firefox.
7.4. Псевдоэлементы :: before и :: after [2]
Псевдоэлементы ::before и ::after могут использоваться для описания сгенерированного контентадо или после содержимого элемента. Они объяснены в CSS 2.1 [CSS21].
Когда псевдоэлементы ::first-letter и ::first-line применяются к элементу, содержимое которого генерируется с использованием ::before или ::after, они применяются к первомубуква или строка элемента, включая сгенерированный контент.
Например, Google Chrome и Firefox отличаются тем, применяется ли украшение псевдоэлемента ::first-line к псевдоэлементам ::before и ::after.
Поведение кода вопроса в Google Chrome
Поведение кода вопроса в Firefox
Чтобы сделать то же самое с Google Chrome в Firefox, вы можете применить свойство color к псевдоэлементу ::before, например @ Raviнаписал в комментарии в тексте вопроса.
p::before {
content: 'Red text';
display: block;
color: red;
}
<p>This text should be red</p>