html - 如何在html中制作带圆圈的线条边框？

Question

如何使每个 div 都有一个“圆圈”连接到多个 div 左侧的线条？

这里有一个例子: https://www.ruxit.com/ruxit/survey.html

如何复制这个效果/边框？

Answer 1

如果您在您提供的网站上检查相关元素，您可以看到圆圈是使用 :before 完成的伪元素，该行是使用 :after 完成的伪元素。

这是关于 jsfiddle 的快速模型

CSS:

.border:before
{
    background-color:blue;
    width:1.2em;
    height:1.2em;
    content:'';
    display:block;
    float:left;
    border-radius:50%;
}
.border:after
{
    content:'';
    display:block;
    background-color:blue;
    height:100%;
    width: 1px;
    left:0.55em;
    margin-top:-1px;
    position:relative;
}

和here是 King Kong 的改进版本使用 border-left，解决了 :after 的问题使用长字符串时不出现:

HTML:

<div class="border" style="height:75px;">hey</div>
<div class="border" style="height:50px;">hey2</div>
<div class="border" style="height:150px;">hey3</div>
<div class="border end">done</div>

CSS:

.border {
    padding-left:20px;
    position:relative;
    margin-left:0.6em;
    box-sizing:border-box;
}
.border:not(.end) {    
    border-left:1px solid blue;        
}
.border:before
{
    background-color:blue;
    width:1.2em;
    height:1.2em;
    content:'';    
    border-radius:50%;
    position:absolute;
    left:-0.6em;
    top:0;
}