[分享]css列表之间用点线分割

 CSS中的列表是网页设计中经常用到的元素之一，其中列表项与列表项之间用点线分割可以使网页看起来更加美观。那么，如何使用CSS实现这个效果呢？下面将介绍具体做法。首先，在HTML中建立列表，代码如下：...

 CSS中的列表是网页设计中经常用到的元素之一，其中列表项与列表项之间用点线分割可以使网页看起来更加美观。那么，如何使用CSS实现这个效果呢？下面将介绍具体做法。
首先，在HTML中建立列表，代码如下：

<ul>
   <li>列表项一</li>
   <li>列表项二</li>
   <li>列表项三</li>
</ul> 

以上代码建立了一个无序列表，其中包含三个列表项。
接下来，我们需要对列表项进行样式设置。代码如下：

ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
li {
   padding-left: 1.5em;
   text-indent: -.7em;
   position: relative;
}
li:before {
   content: "";
   position: absolute;
   width: .5em;
   height: .5em;
   top: .55em;
   left: 0;
   border-radius: 50%;
   background-color: #000000;
}
li:first-child:before {
   display: none;
}
li:last-child:after {
   display: none;
}
li:after {
   content: "";
   position: absolute;
   width: .6em;
   height: .6em;
   top: .45em;
   left: -.1em;
   border-radius: 50%;
   background-color: #ffffff;
   border: 2px solid #000000;
} 

以上代码中，我们使用了:before和:after来设置前后分割点的样式，具体做法如下：
- 隐藏第一个列表项前的分割点：li:first-child:before { display: none; }
- 隐藏最后一个列表项后的分割点：li:last-child:after { display: none; }
- 给每个列表项添加前分割点：li:before {}
- 给每个列表项添加后分割点：li:after {}
最终的效果如下图所示：
图一：CSS分割点效果图
通过上面的介绍，相信大家已经了解了如何使用CSS在列表项之间用点线分割。在实际应用中，可以根据网页设计的需要，调整分割点的大小和颜色，使列表更加美观。