疑似要素の:first-letterが2文字目にも適用される

:first-letterのスタイルが2文字目にも適用される不具合？に遭遇したのでメモしておきます。

サンプルコード

いくつかのパターンを作って試してみます。

HTML

<ol>
<!-- (01) --><li>ふつうのにほんご</li>
<!-- (02) --><li>「友情」「努力」「勝利」</li>
<!-- (03) --><li>◆先頭に記号付きの場合</li>
<!-- (04) --><li>◆「友情」「努力」「勝利」</li>
<!-- (05) --><li>◆◆◆◆◆</li>
<!-- (06) --><li>◆◆◆◆◆記号が複数個</li>
<!-- (07) --><li>①先頭に丸数字付きの場合</li>
<!-- (08) --><li>①「友情」「努力」「勝利」</li>
<!-- (09) --><li>①②③④⑤</li>
<!-- (10) --><li>①②③④⑤丸数字が複数個</li>
<!-- (11) --><li>※先頭に米印付きの場合</li>
<!-- (12) --><li>※「友情」「努力」「勝利」</li>
<!-- (13) --><li>※※※※※</li>
<!-- (14) --><li>※※※※※米印が複数個</li>
<!-- (15) --><li>「「「「「」」」」」</li>
<!-- (16) --><li>「「「「「友情・努力・勝利」」」」」</li>
<!-- (17) --><li>"友情"・"努力"・"勝利"</li>
<!-- (18) --><li>"""""友情・努力・勝利"""""</li>
</ol>

CSS

li:first-letter {
	color: red;
}

:first-letterのデモページ

Windowsの各ブラウザで、先頭から何文字目まで色が変更されているかを確認した結果が以下の通りです。

IE11とedgeは調べた範囲では挙動は同じでしたが、それ以外はブラウザによって差がありました。
先頭のテキストが記号の場合に発生することがあるようですが、記号によっても挙動が異なる場合があるようです。

ググって調べてみると、以下のような記述がありました。

先頭文字に記号（UNICODEでPunctuationとして分類される文字）を使った場合、
:first-letterの設定が2文字目まで適応されるのは仕様です。
引用 – 人力検索はてな

仕様らしいです。

CMSなどでクライアントが入力したりする場合など、先頭に記号を入れることは割とありそうなので注意が必要そうです。
　

【参考サイト】

• スタイルシートについての質問です。 以下の現象で困っています… – 人力検索はてな