javascript - 针对 :first-letter of :after content pseudoelement

Question

我有一个伪元素:在 CSS 中定义的内容之后。

div:after {
content:'This is the sentence.';
}

谁能告诉我如何定位内容的第一个字符并更改其样式。 Jquery 没问题，但我正在尝试使用 first* 伪元素来实现。

Answer 1

唯一一次 :first-letter 可能匹配 :after 伪元素的第一个字母是如果伪元素是内联的，并且没有伪元素之前的其他内容(至少在通常的 LTR 书写模式下)。此外，伪元素不能包含它们自己的伪元素，因此您也不能执行 :after:first-letter。

如果您的 div 元素有内容，那么您将无法使用 :after 伪元素来执行此操作。您将需要使用实际的子元素。您可以使用 jQuery 的 .append() 方法轻松生成一个，但是如果您想要以 that 元素的 :first-letter 为目标，您将需要将其显示为 block 或内联 block 而不是内联:

$('div').append('<span class="after">This is the sentence.</span>');

div > .after {
    display: inline-block;
}

div > .after:first-letter {
    color: red;
}