我可以有多个：在同一个元素的伪元素之前？
是否有可能有多个:before相同元素的伪造:before ？
.circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; }
我正在尝试将上述样式应用于使用jQuery的相同元素，但只应用最新的样式，从来都没有。
在CSS2.1中，任何时候一个元素最多只能有一种伪元素。 （这意味着一个元素可以同时具有:before和one :after伪元素 – 它不能只有一种以上）。
因此，当你有多个匹配相同元素的规则:before ，它们将全部级联并应用到单个元素:before像普通元素一样。 在你的例子中，最终结果如下所示：
.circle.now:before { content: "Now"; font-size: 19px; color: black; }
正如你所看到的，只有具有最高优先级的content声明（如前面提到的那样）才会生效，其余的声明将被丢弃，就像任何其他的CSS属性一样。
在CSS2.1的select器部分中描述了这种行为：
伪元素的行为就像CSS中的真实元素，除了下面和其他地方所述的例外。
这意味着具有伪元素的select器就像正常元素的select器一样工作。 这也意味着级联应该以相同的方式工作。 奇怪的是，CSS2.1似乎是唯一的参考。 css3-selectors和css3-cascade都没有提到这一点，在将来的规范中是否会被澄清还有待观察。
如果一个元素可以使用相同的伪元素匹配多个select器，并且希望所有元素都以某种方式应用，则需要使用组合select器创build额外的CSS规则，以便您可以准确指定浏览器在这些元素中应该执行的操作案例。 我不能在这里提供包含content属性的完整示例，因为不清楚符号或文本是否应该先出现。 但是这个组合规则所需的select器是.circle.now:before或.now.circle:before – 无论你select哪个select器都是个人喜好，因为两个select器都是等价的，只是你需要的content属性的值定义你自己。
如果你仍然需要一个具体的例子，请参阅我对这个类似问题的回答 。
传统的css3-content规范包含了一个关于使用与CSS2.1级联相兼容的符号插入multiple ::before和::after伪元素的部分 ，但是请注意，这个特定的文档已经过时 – 从未更新过2003年，在过去的十年里没有人实现过这个function。 好消息是被遗弃的文件正在积极进行css-content-3和css-pseudo-4的重写。 坏消息是在这两个规范中都没有find多个伪元素特征，大概是由于缺乏实现者的兴趣。
如果你的主要元素有一些子元素或文本，你可以使用它。
定位你的主要元素相对（或绝对/固定），并使用：之前和之后：绝对位置（在我的情况下，它必须是绝对的，不知道你的）。
现在，如果你想要一个更多的伪元素，将一个绝对：before附加到一个主元素的子元素（如果你只有文本，把它放在一个跨度，现在你有一个元素），这是不相对/绝对/固定。
这个元素将会像他的主人一样开始行动是你的主要元素。
HTML
<div class="circle"> <span>Some text</span> </div>
CSS
.circle { position: relative; /* or absolute/fixed */ } .circle:before { position: absolute; content: ""; /* more styles: width, height, etc */ } .circle:after { position: absolute; content: ""; /* more styles: width, height, etc */ } .circle span { /* not relative/absolute/fixed */ } .circle span:before { position: absolute; content: ""; /* more styles: width, height, etc */ }
