Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two ::after pseudo-elements [duplicate]

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.

like image 505
JellicleCat Avatar asked Jun 01 '12 18:06

JellicleCat


People also ask

When would you use the :: before or :: after pseudo-element in your CSS?

The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.

What does :: After mean in CSS?

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

Can you have multiple pseudo-elements?

Multiple pseudo-elements can be created with the ::before(ordinal) and ::after(ordinal) notation, where 'ordinal' is a positive integer. ::before pseudo-elements are ordered descending by 'ordinal' from the host element's content edge.

Can I have multiple before pseudo-elements for the same element?

1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)


1 Answers

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

like image 75
Zoltan Toth Avatar answered Oct 05 '22 19:10

Zoltan Toth