目标 :内容伪元素的首字母

Targeting :first-letter of :after content pseudoelement

本文关键字：元素 目标      更新时间：2023-09-26

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

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

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

:first-letter唯一可能匹配:after伪元素的第一个字母的情况是伪元素是内联的，并且伪元素之前没有其他内容（至少在通常的LTR写入模式下）。此外，伪元素不能包含自己的伪元素，因此您也不能:after:first-letter。

如果您的div元素包含内容，则无法使用:after伪元素执行此操作。您需要改用实际的子元素。您可以使用 jQuery 的 .append() 方法轻松生成一个，但如果您想针对该元素:first-letter，则需要将其显示为块或内联块而不是内联：

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

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

您暂时无法执行类似div::after::first-letter的操作，但是只需创建要操作的内容并将其注入到DOM中，就可以相对轻松地实现相同的最终结果，如果使用了div::after伪元素：

(function () {
    var aftr = document.createElement( "div" ),
        divs = document.querySelectorAll( "div" );
    aftr.className = "after";
    aftr.textContent = "This is the sentence.";
    for ( var i = 0; i < divs.length; i++ ) {
        divs.item(i).appendChild( aftr.cloneNode( true ) );
    }
}());

现在有了这些元素，您可以继续设置它们的样式：

.after:last-child::first-letter {
    color: red;
    padding: .5em 1em;
    border: 1px solid red;
}

小提琴：http://jsfiddle.net/jonathansampson/7gmbvewh/

立即让我感到不舒服的一件事是标记和您希望在这些元素中显示的文本之间的距离。您可以将文本作为数据属性放置在标记中：

<div data-after="After content">Original Content</div>

然后在最后一个循环中使用它（如果存在）：

for ( var i = 0; i < divs.length; i++ ) {
    var clone = aftr.cloneNode( true ),
        after = divs.item(i).dataset.after;
    if ( after ) {
        clone.textContent = after;
    }
    divs.item(i).appendChild( clone );
}

小提琴：http://jsfiddle.net/jonathansampson/7gmbvewh/2/

如果这是一个功能问题，那么答案是：

不幸的是，您无法使用伪元素进行定位和操作。

但是有一些解决方法（不要使用:after，而是实际元素），请阅读您的问题下的评论。

相关文章：