Two ::after pseudo-elements

css pseudo-element
JellicleCat picture JellicleCat · Jun 1, 2012 · Viewed 60k times · Source

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.

Answer

Zoltan Toth picture Zoltan Toth · Jun 1, 2012

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

Related questions

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

Is there any way to select/manipulate CSS pseudo-elements such as ::before and ::after (and the old version with one semi-colon) using jQuery? For example, my stylesheet has the following rule: .span::after{ content:'foo' } How can I change 'foo' …

Read More
CSS :not(:last-child):after selector

I have a list of elements, which are styled like this: Outputs One | Two | Three | Four | Five | instead of One | Two | Three | Four | Five Anyone know how to CSS select all but the last element? You can see the definition …

Read More
Can I use a :before or :after pseudo-element on an input field?

I am trying to use the :after CSS pseudo-element on an input field, but it does not work. If I use it with a span, it works OK. <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .…

Read More