Question

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

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

任何人都可以告诉我如何定位内容的第一个字符并改变其风格。 Jquery还可以，但我正在尝试用第一个* pseudoelement。

Answer 1

唯一的时间: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;
}

Answer 2

您暂时无法执行div::after::first-letter之类的任何操作，但只需创建您希望操作的内容并将其注入其中，您就可以相对轻松地获得相同的最终结果您使用过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 ) );
    }

}());

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

.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/

Answer 3

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

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

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

定位：第一个字母：在内容伪元素之后

3 个答案: