在li之间插入一个圆圈

Question

我有以下元素类：

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

我想在任何li之后插入它，除了last:看起来像这样：

导航栏是一个自定义的bootstrap nav-bar（我的意思是来自那里的课程），我该如何处理？

我应该像这样插入：

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

...

或者还有其他办法吗？

Answer 1

您无需添加新的class，只需将这些属性添加到li:not(first-child):before，这将选择所有li元素，但第一个元素并在每个元素前添加一个圆圈：

dabblet

上的演示

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

Answer 2

你需要先做或回答这个：

DEMO

ul li{
    display:inline-block;
}

ul li:before{
    display:inline-block;
    width:6px;
    height:6px;
    content:" ";
    border:2px solid red;
    border-radius:4px;
    margin-right: 5px;
}
/*ADING DIFFRENT COLOR TO LAST ITEM*/
li:last-child{
  color:red;
}


/*REMOVING CIRCLE FROM FIRST ITEM*/
li:first-child:before{
  display:none;
}

<ul>
    <li>FIST</li>
    <li>SECOND</li>
    <li>THIRD</li>
    <li>FORTH</li>
    <li>FIFTH</li>
</ul>

之前和之后，您可以创建虚拟元素并为其设置效果和位置