什么&x2019；CSS中的：before和：after伪元素选择器的要点是什么？

我像其他很多人一样使用了CSS伪元素选择器，主要是说我使用过它们

但我正在绞尽脑汁，努力找出他们与加价并列的理由

以以下为例：

    <p>Hello</p>

    p:after {
       content: "*";
    }

你好

p:之后{ 内容：“*”； } 现在，与使用

标记相比，使用此标记的优势是什么

---

我是否遗漏了

：在
之前和
：在
之后的要点？是否有确凿的理由将它们用于现有的语义标记之上？
我认为
：在
之前和
：在
之后都在CSS2中，但撇开迂腐，这些特殊的伪元素旨在添加“内容”，实际上只是一种视觉辅助

主要示例是在
元素周围添加引号，Firefox在其默认样式表中使用这些选择器进行此操作。有些人还使用它们来清除浮动

尽管CSS
content
属性的名称不同，但您不应该将它们用于实际内容，因为非可视用户代理（即屏幕阅读器）应该忽略它们

我从来没有想到过它们有多大的用途，尽管我曾经用它们在个人网站上的悬停链接中添加过一些unicode图标——就像你一样，这只是说我用过它们。
CSS3伪选择器还包括一些基本的选择器，如：link、：hover、：active、：focus、：first child、：nth child。如果没有这些，就不可能创建一个有用的站点

至于不太常用的伪选择器，如：after和：before，它们在某些情况下很有用，因为内容是动态生成的，并且您希望在特定元素或标记之前插入某些内容。
对生成的内容这样说：

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

基本上，其目的是通过“内容”减少对内容结构的污染，否则“内容”更适合作为表现元素，或者最好是自动化的。
如果您谈论的是
：before
和
：after
：它们被用作表示元素，用于在实际文档中添加更多元素会将结构与外观混为一谈的情况。我见过几个案例：


项目符号列表中的项目符号
在
q
元素周围加引号
时尚阴影
装饰和文本的开头或结尾
老实说，唯一值得使用的方法是强制元素在dom中具有正确的大小。例如，使用以下代码：

<div class="container">
    <div>this div is floated left</div>
    <div>this div is floated left</div>
</div>

现在尝试这个例子，应用背景色或图像，您将看到.container div始终具有适当的高度（即内部内容的总组合高度），即使所有内部html都是浮动的（就像大多数ul/li css按钮一样）

我还对每个div使用after，我将所有内容包装在每个html页面中。这是因为给定页面上的所有内容都可能被浮动，我想确保我的content div在适当的背景下始终具有正确的大小/填充。
：after
不是一个新的CSS3伪元素。下面是一个不错的示例：/plugOther:。光滑的阴影：@thirtydot:这么多Helvetica.@BoltClock:你很幸运-我有Arial..甚至更迂腐：规范从来没有把它们称为“伪选择器”。@BoltClock:他妈的没有。
：第一个孩子和
：n-child（）
是必不可少的？我们已经有好几年没有（或很少）使用CSS2的《第一个孩子》了，这都要归功于IE6。这当然与“不可能”相反。@BoltClock:调用那些essential有点牵强，但它们对于在不污染标记的情况下实现这一点是必不可少的。而且链接伪类只有在您不想围绕默认链接颜色进行设计时才是必需的。@BoltClock:对于实现许多真正常见的设计效果，
：first child
当然是。
.container:after{
    content:'.';
    height:0;
    line-height:0;
    display:block;
    float:left;
    visibility:hidden;
}