cssで「::after」と書いた場合と「 ::after」と書いた場合でハイパーリンクの挙動が変わる

Question

現象について

現在、市販の教本に従ってhtml&cssの勉強をしているのですが、

<div id="breadcrumb">
    <ol>
        <li><a href="index.html">HOME</a></li>
        <li>ギャラリー</li>
    </ol>
</div>
```というような形で作成したhtmlのパンくずリストに対して

#breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
}
#breadcrumb ol li {
display: inline;
}
#breadcrumb ol li::after {/* liと::afterの間にスペースがない */
content: ">";
padding-left: 7px;
}

#breadcrumb ol {
list-style: none;
margin: 0;
padding: 0;
}
#breadcrumb ol li {
display: inline;
}
#breadcrumb ol li ::after {/* liと::afterの後ろにスペースがある */
content: ">";
padding-left: 7px;
}

前者では想定通り「HOME」部分のみにindex.htmlへのリンクが張られ、後者では「HOME」に対して付されているリンクが「>」まで広がって適用されます。

疑似要素が子要素として指定されたことによってcssが適用されないのであればある程度納得がいくのですが、なぜこのような違いが発生するのでしょうか？

Answer 1

li ::afterと書くと、li *::afterの略とみなされます。つまり、::afterは<li>の子孫要素に対して発生します。

Comments

[maisumakun]

今回の場合、スペースありでは::afterが<a>タグそのものに対して適用されます。

[good_sun]

非常にわかりやすい解説で現象が発生した理由がよくわかりました。
回答賜りありがとうございました。