I've been experimenting with ways to display an ::after pseudo element in between each item within a group.
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;
}
From what I understand, my CSS is trying to target all elements with the class of element inside an element with the class of outer that are not the :last-child in that particular set. It seems like either I'm mistaken or this approach might not be feasible?
Is achieving this effect possible, and if it is, how can it be done?