javascript - 如何用CSS或JS做出索引线

问题描述

问 题

如图，如何用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%;
    background: #CCC;
    left:5px;
    top:13px;
}

.item .article{
    margin-left: 20px;
}

.item .article:before{
   content:"";
   border-left:1px solid #CCC;
   left:-12px;
   top:17px;
   height:5px;
   position: relative;
}
.item:last-child .article:before{
    border:none;
}

.item .article:after{
    content:"";
    position:absolute;
    top:15px;
    left:22px;
    right:8px;
    border:dotted #000;
    border-width:1px 0 0 0;
    z-index:-1;
}

.item .title,.item .info{
    display: inline-block;
    background: #FFF;
    padding:0 3px;
    vertical-align: middle;
}

.item .info{
    position: absolute;
    right:0px;
    top:5px;
}

完整的Demo:http://runjs.cn/code/c7w8jxyb

这篇关于javascript - 如何用CSS或JS做出索引线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！