This creates two pseudo elements:
.myElement {}
.myElement::before,
.myElement::after {
content: '';
}
How to add more pseudo elements to the element? Is there a way to add a pseudo element to another pseudo element?
Asked
Active
Viewed 100 times
1
-
I am surprised no one has asked this before. I might be using wrong keywords to find the existing questions. – Gajus Nov 06 '14 at 16:37
-
[Similar question.](http://stackoverflow.com/questions/9007546/adding-pseudo-elements-after-pseudo-elements) – lonesomeday Nov 06 '14 at 16:39
-
Nope. There is just `::before` and `::after`. Also, you didn't search very hard http://stackoverflow.com/questions/10855890/two-after-pseudo-elements and here http://stackoverflow.com/questions/9007546/adding-pseudo-elements-after-pseudo-elements – Turnip Nov 06 '14 at 16:40
-
The phrasing of other question is just bizarre. – Gajus Nov 06 '14 at 16:42
3 Answers
3
No, you can't.
The pseudo elements are defined as (by W3 docs)
12.1 The :before and :after pseudo-elements
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
Since the document tree is the element's defined source code, a pseudo element cannot contain another pseudo element, since it has no tree.
LcSalazar
- 16,524
- 3
- 37
- 69
2
There is a CSS pseudo element '::before(2)' but unfortunately, there isn't any browser support yet for this :
div { content: 'A' }
div::before { content: 'B'; }
div::before(2) { content: 'C'; }
...would result in the following rendering objects:
,-----------------------.
| ,---. ,---. |
| | C | | B | A |
| `---' `---' |
`-----------------------'
Source : http://www.w3.org/TR/css3-content/#inserting0
Browser support : http://realworldvalidator.com/css/pseudoelements/::before%282%29
Magicprog.fr
- 4,072
- 4
- 26
- 35
-
It doesn't do what you seem to think it does. Here is a simple example, http://jsfiddle.net/29zxmfbv/1/. – Gajus Nov 06 '14 at 16:52
-
@GajusKuizinas Ok, i don't undestand you need 2 `content` properties. Updated my answer, but it can't help you for now. – Magicprog.fr Nov 06 '14 at 17:00
-
-
Why was it downvoted? oO Reference to an obscure but existing part of a W3C draft, visual explanation and note on no support: +1 – FelipeAls Nov 06 '14 at 17:11
-
@GajusKuizinas Thanks, can you put your question as "answered" by clicking on the tick of the answer that help you the most. – Magicprog.fr Nov 06 '14 at 17:12
-
The answer should be chosen when it actually solves the problem. I will choose this as an answer as soon as `::before(n)` is supported by either of the major browser vendors. – Gajus Nov 06 '14 at 17:17
