totothegreat totothegreat - 1 year ago 85
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
except for
looking like this:

enter image description here

The navbar is a customized bootstrap
(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: $ === 'home'}">
<a ui-sref="home" >Home</a>
<li class='circle'>


Or is there any other way to do it?

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download