Two ::after pseudo-elements

Question

I'd like to apply two css ::after pseudo-elements to a single DOM element, each with a different colour. (Yes, I could wrap the DOM element in another DOM element and give each one and ::after pseudo-element, but my preference is cleaner html.)

I doubt it's possible, but wonder if someone can tell me better.

I especially doubt the possibility of chaining ::after pseudo-elements together so that one ::after pertains to another, which pertains to a DOM element, but if anyone knows how to make that happen, please do tell.

Sorry. I didn't find that duplicate when I searched for the question. I've voted to close (but can't delete now because someone got upvoted). — JellicleCat, Jun 01 '12 at 19:12

score 44 · Accepted Answer · answered Jun 01 '12 at 19:07

44

You can use a :before pseudo-element in addition to your :after - http://jsfiddle.net/BePSq/

answered Jun 01 '12 at 19:07

Zoltan Toth

46,981
12
120
134

6

In the future, this may become achievable through using [:after(2)](http://www.w3.org/TR/css3-content/#inserting0) – Safareli Oct 11 '15 at 14:11
3

@Safareli Nothing in the linked spec document supports that. – mbomb007 May 24 '19 at 21:29

score 11 · Answer 2 · answered Jun 01 '12 at 19:05

11

You can't add two ::after pseudo-elements to one DOM element. You can however add an ::before additionally. Depending on what you are trying to accomplish, this may work.

answered Jun 01 '12 at 19:05

bookcasey

39,223
13
77
94

1

How can you add two ::after pseudo-elements to one DOM element? Any example? – Experimenter Jun 23 '16 at 14:40

score 3 · Answer 3 · answered Jun 01 '12 at 19:09

3

You can use both the :before and :after pseudo-elements simultaneously on one DOM element. Just make sure you position them correctly. I believe :before places the psudo-element before the parent one, while :after places it after in the html. You can only use these two however and cannot add more pseudo-elements than that.

answered Jun 01 '12 at 19:09

David

31
1

They're effectively both child elements of the parent element, with `::before` appearing before the element content, and `::after` coming last. – Conan Jan 22 '17 at 11:07

Two ::after pseudo-elements

3 Answers3

Linked