CSS 我可以有多个 :before 同一个元素的伪元素吗？

Can I have multiple :before pseudo-elements for the same element?

提问by ChrisOdney

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

:before同一个元素可以有多个伪吗？

.circle:before {
    content: "CF";
    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 将上述样式应用于同一个元素，但只应用了最新的一个，而不是两者都应用。

采纳答案by BoltClock

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 :beforeand an :afterpseudo-element — it just cannot have more than one of each kind.)

在 CSS2.1 中，一个元素在任何时候最多只能有一种伪元素。（这意味着一个元素可以同时拥有一个:before和一个:after伪元素——只是每种元素不能超过一个。）

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

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

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

As you can see, only the contentdeclaration 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.

如您所见，只有content具有最高优先级的声明（如前所述，最后一个）才会生效——其余的声明将被丢弃，就像任何其他 CSS 属性一样。

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

这种行为在CSS2.1的Selectors 部分有描述：

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-selectorsnor css3-cascademention this at all, and it remains to be seen whether it will be clarified in a future specification.

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

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 contentproperty 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:beforeor .now.circle:before— whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the contentproperty that you will need to define yourself.

如果一个元素可以将多个选择器与同一个伪元素匹配，并且您希望所有选择器都以某种方式应用，您将需要使用组合选择器创建额外的 CSS 规则，以便您可以准确指定浏览器在这些选择器中应该做什么案件。我无法提供一个完整的示例，包括content此处的属性，因为例如不清楚应该先显示符号还是文本。但是，此组合规则所需的选择器是.circle.now:beforeor .now.circle:before- 无论您选择哪个选择器都是个人偏好，因为这两个选择器是等效的，您只content需要自己定义属性的值。

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 ::beforeand ::afterpseudo-elementsusing 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-3and 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-4为幌子进行重写。坏消息是，在任一规范中都找不到多伪元素功能，这可能再次是由于缺乏实现者的兴趣。

回答by HydraOrc

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 定位绝对（在我的情况下它必须是绝对的，不知道你的）。

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.

现在，如果您还想要一个伪元素，请将一个绝对的 :before 附加到主元素的一个子元素（如果您只有文本，请将其放在一个跨度中，现在您有了一个元素），这不是相对/绝对/固定.

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

这个元素将开始表现得好像他的主人是你的主要元素。

HTML

HTML

<div class="circle">
    <span>Some text</span>
</div>

CSS

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

回答by Keko Perera

I've resolved this using:

我已经解决了这个问题：

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

Using the font family "font awesome 5 free" for the icon, and after, We have to specify the font that we are using again because if we doesn't do this, navigator will use the default font (times new roman or something like this).

使用字体系列“font awesome 5 free”作为图标，之后，我们必须指定我们再次使用的字体，因为如果我们不这样做，导航器将使用默认字体（times new roman 或类似的字体）这个）。