html圆圈和线,html – 如何用css绘制两个圆圈之间的水平线？

您可以使用伪元素来插入绝对定位的边框：

#status-buttons {

position: relative; /* 1 */

display: inline-block; /* 2 */

}

#status-buttons::after { /* 3 */

content: "";

position: absolute;

width: 50%;

z-index: -1; /* 4 */

top: 35%;

left: 25%;

border: 3px solid #ACCF5B;

}

#status-buttons a {

color: black;

display: inline-block;

font-size: 17px;

font-weight: normal;

margin-right: 0;

text-align: center;

text-transform: uppercase;

min-width: 150px;

text-decoration: none;

}

#status-buttons a:hover {

text-decoration: none;

}

#status-buttons a.active span {

color: white;

background: #ACCF5B;

box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;

}

#status-buttons span {

color: white;

background: #22bacb;

display: block;

height: 45px;

margin: 0 auto 10px;

padding-top: 20px;

width: 60px;

border-radius: 50%;

box-shadow: rgba(0, 0, 0, 0.792157) 3px 3px 3px 0;

}

1 Step 1

2 Step 2

笔记：