Show pseudo element between elements

Tags: html,css,pseudo-element

Problem :

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?

---

Solution :

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