有什么意义:在CSS之前和之后的伪元素选择器？

Question

我和许多其他人一样使用了CSS伪元素选择器,主要是说我已经使用过它们了.

但是我绞尽脑汁,努力想出一个与标记并列的理由.

请看以下示例:

    <p>Hello</p>

    p:after {
       content: "*";
    }

现在,使用它比使用<span>标签有什么好处？

我错过了:before和:after？是否有一些坚实的理由将它们用于预先存在的语义标记？

Answer 1

CSS2.1规范说明了生成的内容:

在某些情况下,作者可能希望用户代理呈现不来自文档树的内容.一个熟悉的例子是编号列表; 作者不希望明确列出数字,他或她希望用户代理自动生成它们.类似地,作者可能希望用户代理在图的标题之前插入单词"Figure",或者在第七章标题之前插入"Chapter 7".特别是对于音频或盲文,用户代理应该能够插入这些字符串.

基本上,目的是通过"内容"最小化内容结构的污染,否则"内容"更适合作为表示元素,或者更好地自动化.