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

【问题标题】：Can I have multiple :before pseudo-elements for the same element?同一个元素可以有多个 :before 伪元素吗？
【发布时间】：2012-08-13 11:27:12
【问题描述】：

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

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

我正在尝试使用 jQuery 将上述样式应用于同一个元素，但只应用最新的样式，而不是两者。

【问题讨论】：

标签： css css-selectors pseudo-element css-content

【解决方案1】：

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

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

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

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

Selectors section of CSS2.1 中描述了此行为：

除了下面描述的例外和elsewhere.
，伪元素的行为就像 CSS 中的真实元素一样

这意味着带有伪元素的选择器就像普通元素的选择器一样工作。这也意味着级联应该以相同的方式工作。奇怪的是，CSS2.1 似乎是唯一的参考。 css3-selectors 和 css3-cascade 都没有提到这一点，是否会在未来的规范中澄清还有待观察。

如果一个元素可以匹配多个具有相同伪元素的选择器，并且您希望所有这些都以某种方式应用，则需要使用组合选择器创建额外的 CSS 规则，以便您可以准确地指定浏览器应该在那些情况下做。我无法在此处提供包含content 属性的完整示例，因为不清楚例如符号或文本是否应该放在第一位。但是这个组合规则所需的选择器是.circle.now:before 或.now.circle:before — 无论您选择哪个选择器都是个人偏好，因为这两个选择器是等效的，您需要自己定义的只是content 属性的值。

如果您仍需要具体示例，请参阅我对 this similar question 的回答。

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements 使用与 CSS2.1 级联兼容的符号，但请注意，该特定文档已过时 - 自 2003 年以来未更新，过去十年没有人实现该功能。好消息是，被遗弃的文档正在以css-content-3 和css-pseudo-4 的名义积极进行重写。坏消息是，在这两个规范中都找不到多个伪元素功能，这大概是由于缺乏实现者的兴趣。

【讨论】：

在给定的情况下，如果一个元素既属于circle 类又属于now 类，这两个规则都适用于元素的:before 伪元素，但普通的CSS 暗示只有一个的content 设置可以生效（通过正常的级联规则）。关键是content不会累积。
原来几个月后我回答的this question 是这个的副本。此后，我将来自另一个答案的大部分信息合并到了这个答案中，该答案基本上扩展了@Jukka 上面所说的所有内容，因为它获得了更多的流量，并且排在第一位。
时隔13年，css-content-3草稿终于有了been updated。伪元素部分肯定已被删除，以支持 css-pseudo-4，它不允许多个 ::before 或 ::after 伪元素。
@Oriol：实际上是 12 年。 css-pseudo-4 的 FPWD 是去年推出的，当时 css-content-3 已经更新为指向新规范。
@BoltClock Drafts.csswg.org 上的 css-content-3 编辑器草案已在一段时间前更新，但 w3.org 上的工作草案直到最近仍是 2003 年的草案。我还是抱有希望的……

【解决方案2】：

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

将您的主要元素相对（或绝对/固定）定位并同时使用 :before 和 :after 定位绝对（在我的情况下它必须是绝对的，不知道您的）。

现在，如果您想要一个伪元素，请将绝对 :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 */
}

【讨论】：

虽然选择的答案是准确的，但这对我来说是一个可行的解决方法。我能够模拟拥有多个伪元素，而无需向 DOM 添加更多节点！
@matt.kauffman23 那么，你能告诉我你是如何模拟的吗？
@BbIKTOP 抱歉刚刚看到您的评论。就我而言，我正在研究一个总是有孩子的模式，所以我最终得到了类似的东西：.modal:first-child:before { …
@matt.kauffman23 时隔6年再回忆这样一个细节，你的记忆力真好！
@ChrisOdney 如果马特试图使其与 IE5.5 兼容，他可能一直在使用同一个应用程序/网站；）

【解决方案3】：

我已经解决了这个问题：

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

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

【讨论】：

【解决方案4】：

您还可以在内容字段中使用图像/图标加文本

例如

p.album-title::after {
  content: url('https://...camera-icon-blue.png') ' View >';
  display: block;
  ...;
}

【讨论】：