我可以有多个：before伪元素相同的元素？(Can I have multiple :before

是否有可能有多个:before假点为同一个元素？

.circle:before {
    content: "\25CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

我想上面的样式应用到使用jQuery相同的元素，但只有最近的一个应用，从来没有他们两个。

Answer 1:

在CSS2.1，一个元素只能在任何时间任何一种伪元素中的大多数之一。（这意味着一个元素可以同时拥有:before和:after 。伪元素-它只是不能有各种不止一个）

其结果是，当你有多个:before规则匹配相同的元素，他们将所有级联和适用于单个:before伪元素，与通常的元素。在你的榜样，最终的结果是这样的：

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

正如你所看到的，只是content具有最高的优先级声明（如提到的，是最后一个）将生效-该声明的其余部分被丢弃，因为与任何其他CSS属性的情况下。

这种行为在描述CSS2.1的选择器部分：

伪元素的表现就像在CSS真正的元素下面和描述的异常别处。

这意味着，与伪元素选择工作就像选择正常的元素。这也意味着级联应工作方式相同。奇怪的是，CSS2.1似乎是唯一的参考; 既不CSS3选择器也不CSS3级联提到这一点在所有的，它仍然有待观察是否会在将来的规范予以澄清。

如果一个元素可以匹配更多的选择与同一伪元素，并希望所有的人都以某种方式申请，则需要联合选择创建额外的CSS规则，使您可以指定什么浏览器应该在那些做案例。我不能提供，包括一个完整的例子content这里的性质，因为它不明确，例如符号或文本是否应该是第一位的。但是，你需要为这个组合规则的选择是要么.circle.now:before或.now.circle:before -无论选择你选择的是个人喜好既是选择是等价的，这仅仅是对价值content ，您将需要财产来定义自己。

如果您仍需要一个具体的例子，看到我的回答这个类似的问题。

传统CSS3内容规范包含在插入多节::before和::after伪元素使用符号这与CSS2.1级联兼容，但要注意的是特定的文件已经过时了-这还没有被更新2003年，没有人已实施在过去十年中该功能。好消息是，废弃的文件正在积极进行中的幌子改写CSS内容-3和CSS伪4 。坏消息是，多个伪元素功能是无处在任一规格被发现，据推测是由于，再次，缺乏实施者的兴趣。

Answer 2:

如果你的主要元素有一些子元素或者文本，你可以利用它。

你的主要元素的相对位置（或绝对/固定的），并同时使用：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 */
}

文章来源: Can I have multiple :before pseudo-elements for the same element?