我希望将一些CSS圈子与它们之间的垂直线连接起来。
我尝试使用伪元素:after
选择器,如下所示:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
left: 18px;
top: 0;
bottom: 0;
border: 1px dotted;
border-width: 0 0 0 1px;
}
但我根本没有得到任何结果。
照片供我参与完成:
答案 0 :(得分:16)
以这种方式使用:before
伪元素:
* {font-family: 'Segoe UI'; font-size: 10pt;}
.circle {position: relative; border: 2px solid #999; border-radius: 100%; width: 50px; line-height: 50px; text-align: center; margin-top: 50px; background-color: #fff; z-index: 2;}
.circle:first-child {margin-top: 0;}
.circle:before {position: absolute; border: 1px solid #999; width: 0; height: 50px; display: block; content: ''; left: 50%; z-index: 1; top: -54px; margin-left: -1px;}
.circle:first-child:before {display: none;}
<div class="circle">Step 1</div>
<div class="circle">Step 2</div>
<div class="circle">Step 3</div>
答案 1 :(得分:3)
如果您希望ti显示为一行,则必须为:before
元素指定宽度和高度。看看这个:
.circle {
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid;
position: relative;
border-color: #889EB7;
}
.circle:before {
content: "";
display: block;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
border: 1px dotted;
border-width: 0 0 0 1px;
width: 1px;
height: 100px;
}
&#13;
<div class='circle'></div>
&#13;