如何在伪元素上有伪元素？答案

【问题标题】：How to have pseudo-elements on pseudo-elements?如何在伪元素上有伪元素？
【发布时间】：2015-01-03 06:19:09
【问题描述】：

这会创建两个伪元素：

.myElement {}
.myElement::before,
.myElement::after {
    content: '';
}

如何给元素添加更多的伪元素？有没有办法将伪元素添加到另一个伪元素？

【问题讨论】：

我很惊讶以前没有人问过这个问题。我可能使用了错误的关键字来查找现有问题。
Similar question.
不。只有::before 和::after。另外，你没有很努力地搜索stackoverflow.com/questions/10855890/two-after-pseudo-elements，这里是stackoverflow.com/questions/9007546/…
其他问题的措辞很奇怪。

标签： css

【解决方案1】：

不，你不能。

伪元素定义为（W3 docs）

12.1 :before 和 :after 伪元素
顾名思义，:before 和 :after 伪元素指定元素的文档树内容之前和之后的内容位置.

由于文档树是元素定义的源代码，一个伪元素不能包含另一个伪元素，因为它没有树。

【讨论】：

【解决方案2】：

有一个 CSS 伪元素 '::before(2)' 但不幸的是，目前还没有任何浏览器支持：

div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }

...会产生以下渲染对象：

,-----------------------.
| ,---. ,---.           |
| | C | | B | A         |
| `---' `---'           |
`-----------------------'

【讨论】：

【解决方案3】：

这是不可能的，您可能需要将您的元素包装在另一个元素中。

【讨论】：