如何在伪元素上使用伪元素？

Question

这会创建两个伪元素：

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

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

Answer 1

不，你不能。

伪元素定义为（W3 docs）

  

12.1：before和：after伪元素
正如其名称所示，：before和：after伪元素指定元素文档树之前和之后的内容位置内容。

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

Answer 2

有一个CSS伪元素＆＃39; :: before（2）＆＃39;但不幸的是，目前还没有任何浏览器支持：

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

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

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

来源：http://www.w3.org/TR/css3-content/#inserting0

浏览器支持：http://realworldvalidator.com/css/pseudoelements/::before%282%29

Answer 3

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