totothegreat totothegreat - 3 months ago 19
CSS Question

Insert a circle between li's

I have the following elements class:

.circle {
width: 8px;
height: 8px;
border: 2px solid $primary-color;
border-radius: 10px;
}


And I'm suppose to insert it after any
li
except for
last:
looking like this:

enter image description here

The navbar is a customized bootstrap
nav-bar
(classes are from there I mean), how should I approach this?

should I insert like this:

<ul class="nav navbar-nav">
<li ng-class="{active: $state.current.name === 'home'}">
<a ui-sref="home" >Home</a>
</li>
<li class='circle'>
</li>


...

Or is there any other way to do it?

Answer

You don't need to add a new class, just add those properties to a li:not(first-child):before which will select all li elements but the first one and add a circle before each elements:

Demo on dabblet

li:not(:first-child)::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 15px;
    width: 8px;
    height: 8px;
    border: 2px solid red;
    border-radius: 10px;
}