对于同一个元素，我可以使用多个: before 伪元素吗？

是否有可能为同一个元素使用多个 :before伪码？

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

我试图使用 jQuery 将上面的样式应用到同一个元素，但是只应用了最新的样式，而不是两个样式都应用。

161180 次浏览
小开
最佳答案

在 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-content 规范包含一个使用与 CSS2.1级联兼容的表示法插入多个 ::before和 ::after伪元素 的章节，但是请注意，这个特定的文档已经过时了ーー它自2003年以来就没有更新过，而且在过去的十年里没有人实现过这个特性。好消息是，被放弃的文档正在以 Css-content-3和 Css-伪4的形式积极地进行重写。坏消息是在这两个规范中都找不到多个伪元素特性，可能是由于缺乏实现者的兴趣。

小开

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

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

现在，如果还需要一个伪元素，可以在主元素的子元素(如果只有文本，将其放在 span 中，现在就有了一个元素)上附加一个绝对值: before，它不是相对的/绝对的/固定的。

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

超文本标示语言

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

我用以下方法解决了这个问题:

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

对图标使用字体系列“ font Awesome 5 free”，之后，我们必须再次指定我们使用的字体，因为如果我们不这样做，导航器将使用默认字体(乘以 new roman 或类似的东西)。

小开

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

例如:。

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

在: : css 之后设置 content:'any text'并添加 backgroun-image和来自外部 svg 文件 url(anySvgText.svg)的 svg 文本或内联 svg 代码 url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">any second text</text></svg>')

此外，您可以只使用 svg 而不是 content值。但是您必须设置空字符串(content: '')以显示 a: : after 样式

.circle:before {
content: "\25CF";
font-size: 19px;
color: red;
width: 200px;
display: block;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="200"><text x="0" y="15" fill="black" style="font-family: tahoma;">Now</text></svg>');
background-position-x: 15px;
}
<div class="circle"></div>


提交答案