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


    CSS Howto..

    how to set up responsive columns with pure CSS?

    How do I center text next to a floating image using css?

    How to add border to a container with transparent gaps in between

    How to convert css into bss

    CSS: How to make a nav menu with a sub nav menu directly below it?

    How to id dom table so I can position it on page?

    How to put all of the images from folder into CSS box

    How to make bootstrap 3 navbar not wrap

    How to set the overall Grid thumbnail height to be equal?

    How do you wrap long words on newline, and avoid horizontal scroll using CSS?

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    How can I change styling and test for every page reload [closed]

    How to adjust button css styles

    How can I easily copy the whole CSS file from a website?

    How can I align my adsense graphics?

    How to position many DIVs in CSS

    With three divs, how to make one float to the right?

    How to place div on top of responsive rotated div?

    How to DRY Sass code using variables?

    CSS opacity, how to have opaque elements in transparent container element

    How to center an absolutely positioned item in CSS

    How to make a sudoku grid using HTML and CSS?

    How to set a fixed background with CSS?

    How come my