如何用CSS或JS做出索引线

通过伪类做一个dotted边框为虚线，然后给字设背景遮住底下的虚线。
而旁边的圆点和线思路也一样，通过伪类来画，然后定位。善用伪类不仅能实现很多布局，还能精简很多代码，不去影响原本的HTML结构。

HTML

<ul class="index-list">
    <li class="item">
        <div class="article">
            <span class="title">文章</span>
            <span class="info">10条解读</span>
        </div>
    </li>
    <li class="item">
        <div class="article">
            <span class="title">文章</span>
            <span class="info">5条解读</span>
        </div>
    </li>
    <li class="item">
        <div class="article">
            <span class="title">文章</span>
            <span class="info">1条解读</span>
        </div>
    </li>
    <li class="item">
        <div class="article">
            <span class="title">文章</span>
            <span class="info">10条解读</span>
        </div>
    </li>
    <li class="item">
        <div class="article">
            <span class="title">文章</span>
            <span class="info">5条解读</span>
        </div>
    </li>
    <li class="item">
        <div class="article">
            <span class="title">文章</span>
            <span class="info">1条解读</span>
        </div>
    </li>
</ul>

CSS

*{
    margin:0;
    padding: 0;
}

body{
        background:#FFF
}

ul{
    list-style: none
}

.item{
    position:relative;
    width:100%;
    padding:5px 0;

}


.item:after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;