Splitter

Pseudo element splitter shown only between non-hidden elements

by steveukx

HTML

<section>
    <div class="hidden"></div>
    <div class=""></div>
    <div class=""></div>
    <div class="hidden"></div>
</section>

CSS

section { font-size: 0; }

div {
    display: inline-block;
    border: 1px solid red;
    height: 10px;
    width: 10px;
    margin: 2px;
    position: relative;
}

div:before {
    content: "";
    background: green;
    display: none;
    width: 1px;
    height: 10px;
    left: -3px;
    position: absolute;
    top: 0;
}

.hidden { display: none; }

div:not(.hidden) ~ div:not(.hidden)::before {
    display: block;
}