可以有多个:在同一个元素的伪元素之前吗?

Is it possible to have multiple :before pseudos for the same element?

是否可能有多个:在同一个元素的伪之前?

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

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

我尝试使用jQuery将上面的样式应用到相同的元素中，但是只有最近的一个应用程序是应用的，而不是两个。

2 个解决方案

#1

In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)

在CSS2.1中，元素在任何时候最多只能有一种伪元素。(这意味着一个元素可以同时具有a:before和an:after伪元素——每一种元素最多只能有一种)。

As a result, when you have multiple :before rules matching the same element, they will all cascade and apply to a single :before pseudo-element, as with a normal element. In your example, the end result looks like this:

因此，当您有多个:在匹配相同元素的规则之前，它们都将级联并应用于单个:before伪元素，就像对普通元素一样。在您的示例中，最终结果如下:

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

As you can see, only the content declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.

如您所见，只有优先级最高的内容声明(如前所述，最后的内容声明)才会生效——其余的声明都会被丢弃，其他CSS属性也是如此。

This behavior is described in the Selectors section of CSS2.1:

CSS2.1的选择器部分描述了这种行为:

Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.

伪元素的行为就像CSS中的真实元素，下面和其他地方描述的例外。

This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.

这意味着带有伪元素的选择器可以像正常元素的选择器一样工作。这也意味着级联应该以同样的方式工作。奇怪的是，CSS2.1似乎是唯一的参考;无论是css3选择器还是css3-cascade都没有提到这一点，它是否会在未来的规范中被阐明还有待观察。

If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before or .now.circle:before — whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content property that you will need to define yourself.

如果一个元素可以用相同的伪元素匹配多个选择器，并且您希望它们以某种方式应用，您将需要使用组合选择器创建额外的CSS规则，以便您能够准确地指定浏览器在这些情况下应该做什么。我不能在这里提供包含content属性的完整示例，因为不清楚符号还是文本应该放在前面。但是这个组合规则需要的选择器是。circle。现在:之前或现在。circle:before——无论您选择哪个选择器，都是个人偏好，因为两个选择器是等价的，您需要定义自己的内容属性的值。

If you still need a concrete example, see my answer to this similar question.

如果您还需要一个具体的例子，请参见我对类似问题的回答。

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.

遗留的css3内容规范包含一个关于插入多重元素的章节:before和:after，使用与CSS2.1级联兼容的表示法，但是请注意，这个特定的文档已经过时了——它自2003年以来就没有更新过，过去十年也没有人实现过这个特性。好消息是，被抛弃的文档正在以css-content-3和css-pseudo- pseu4的形式进行重写。坏消息是，在这两个规范中都找不到多个伪元素特性，这可能是由于缺乏实现者的兴趣。

#2

If your main element has some child elements or text, you could make use of it.

如果您的主元素有一些子元素或文本，您可以使用它。

Position your main element relative (or absolute/fixed) and use both :before and :after positioned absolute (in my situation it had to be absolute, don't know about your's).

将你的主要元素放在相对位置(或绝对/固定位置)，并同时使用:before和:after Position absolute(在我的情况下，它必须是绝对的，不知道你的)。

Now if you want one more pseudo-element, attach an absolute :before to one of the main element's children (if you have only text, put it in a span, now you have an element), which is not relative/absolute/fixed.

现在，如果您想要更多的伪元素，请将一个absolute:before附加到主元素的一个子元素(如果您只有文本，那么将它放在一个span中，现在您有了一个元素)，它不是相对的/绝对的/固定的。

This element will start acting like his owner is your main element.

这个元素将开始表现为它的所有者是您的主要元素。

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 */
}

#1