Show pseudo element between elements

Question

I've been trying to work out how to show an ::after pseudo element between each element in a set.

HTML:

<div class="outer">
    <div class="element">Hello</div>
    <div class="element">World</div>
    <div class="element">!</div>
</div>

CSS:

.outer .element:not(.outer > .element:last-child)::after
{
    content:"";
    display:inline-block;
    background:url(images/test.png);
    width:4px;
    height:5px;
}

My understanding is that my CSS is targeting all elements with a class of element under an element with a class of outer that aren't the :last-child in that set. I guess I'm either wrong, or what I'm trying isn't possible?

Is this possible, and if so, how?

Answer 1

You could just use this:

outer .element + .element:before
{
    content:"";
    display:inline-block;
    background:url(images/test.png);
    width:4px;
    height:5px;
}

It's the adjacent sibling selector syntax.

Edit: swapped after for before pseudo class

Edit 2: demo

Answer 2

You can write your selector a much simplier way : DEMO

.outer .element + .element:before {/* your CSS rules */}

Instead , your target every element from second, and use the :before pseudo. this will work much better and will increase compatibility.