Javascript 目标：内容后的第一个字母伪元素

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

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

---

谁能告诉我如何针对内容的第一个字符并改变其风格。Jquery还可以，但我正在尝试使用first*pseudoelement来实现它。

唯一的时间

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

如果
div
元素包含内容，则无法使用
：after
伪元素来执行此操作。您将需要使用实际的子元素。您可以使用jQuery的
.append（）
方法轻松地生成一个元素，但是如果您想以该元素的
：第一个字母
为目标，则需要将其显示为块或内联块，而不是内联块：

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

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

不幸的是，您不能使用伪元素来定位和操作

但是有一些变通方法（不要使用
：在
之后，而是实际的元素），请阅读您问题下的注释。
您暂时无法执行类似
div:：after:：first letter
的操作，但您只需创建希望操作的内容，就可以相对轻松地实现相同的最终结果，并将其注入DOM中，如果使用了
div:：after
伪元素，则会将它们放置在DOM中：

(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 ) );
    }

}());

小提琴：

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

<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 );
}

for（变量i=0；i

Fiddle:
：after
不是DOM的一部分，因此无法进一步操作。Javascript不能以伪元素为目标，无论是否使用jQuery@JonathanSampson只有在div并没有任何其他内容的情况下才可以使用。不应该将
content
属性用于实际内容…奇怪但真实。也许可以和您分享您试图实现的效果，我们可能会建议更好的替代方案。若您使用jQuery“可以”，则，为什么不使用jQuery而不是
：after
添加元素呢？
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 );
}