定位：內容后偽元素的第一個字母

Question

我有一個偽元素：after在CSS中定義的內容。

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

任何人都可以建議我如何定位內容的第一個字符並更改其樣式。 jQuery可以，但是我正在嘗試使用first *偽元素來實現。

Answer 1

:first-letter唯一可能與偽元素:after的:after的第一個字母匹配的時間是:after如果偽元素是內聯的，並且在偽元素之前沒有其他內容（至少在通常的LTR編寫模式下仍然如此） ）。 此外，偽元素不能包含它們自己的偽元素，因此您也不能執行:after:first-letter 。

如果您的div元素具有內容，那么您將無法使用:after偽元素來執行此操作。 您將需要使用實際的子元素。 您可以使用jQuery的.append()方法輕松生成一個，但是如果要定位該元素的:first-letter ，則需要將其顯示為block或inline-block而不是inline：

$('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 ，而是實際元素） ，請閱讀您的問題下的注釋。