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

如何在css中的2个圆圈之间画一条水平线？

它必须在其中间,如屏幕截图所示.

示例：

我画了2个圈子,但不知道如何连接它们.

#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.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.792157) 3px 3px 3px 0;

}

1 Step 1

2 Step 2