CSS 擬似要素と:first-letterの併用について

Question

HTML・CSS初学者です。

CSSの擬似要素「::before」と「:first-letter」を使って、コンテンツ番号（連番）を2桁で表示して、2桁目の数字だけ色を変えて表示したかったのですが、以下のコードを試した結果文字色は変わりませんでした。上手くいかなかった原因が知りたいです。

試したコード

.heading {
 counter-reset: number;
}

.content-block::before {
 counter-increment: number;
 content: "0"counter(number);
}

.content-block::before:first-letter {
 color: blue;
}

HTMLに直接数字を書いてspanで囲って…などの代替案が考えられ、「絶対に実現させたい」ということではないんですが、上記のコードでなぜ上手くいかないのか原因を知っておきたいです。

ご回答いただけると幸いです。

Answer 1

CSSの仕様で、疑似要素は1つしか付けれらないと決まっているからです。

https://drafts.csswg.org/selectors/#typedef-compound-selector

<compound-selector> = [ <type-selector>? <subclass-selector>*
                        [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!

Answer 2

::first-letterの指定は、::beforeや::afterで生成した中身にも及びます（CSS4）。

.content-block::before:first-letterではなく.content-block::first-letterとしてください。

jsFiddleでの実装例

Comments

[f.k]

ご回答ありがとうございます！実際にデモを作成していただけて、とても分かりやすく助かります。

ちなみに、content-blockをposition: relativeに、その直下のbefore要素をposition absoluteにすると、適用されなくなってしまうのですが、これは他の原因があるのでしょうか？
お時間ある時で構いませんので、追加質問についてご回答いただけますと嬉しいです。

[maisumakun]

> これは他の原因があるのでしょうか？

はい、::first-letterはインラインレベルの内容から1文字を探します。position:absolute はインラインでないので対象外です。

[f.k]

なるほど！原因がよく分かりました。ありがとうございました！