Is there a third pseudo element, like after and before

Question

I need something like third pseudo element for .foo.bar.

.foo.bar:before { content: "x "; }
.foo.bar:after { content: " x"; }

.foo.bar:before:before { content: "bad "; color: red; }

<div class="foo">apple</div>
<div class="foo bar">orange</div>
<div class="foo">chainsaw</div>
 

Answer 1

No. It's not possible (using CSS) to prepend to :before or :after's content: or in other words make a content:"x"; become bad x cause any defined rule will overwrite the old one, and there's no third to :before and :after