创建由线连接的CSS3圆

我必须在CSS中实现以下圆圈和线条组合,而且我正在寻找有关如何有效实现这一点的指针。圆和线应如下所示:

我能够像这样实现圈子:

span.step {

background: #ccc;

border-radius: 0.8em;

-moz-border-radius: 0.8em;

-webkit-border-radius: 0.8em;

color: #1f79cd;

display: inline-block;

font-weight: bold;

line-height: 1.6em;

margin-right: 5px;

text-align: center;

width: 1.6em;

}

但是这些线条对我来说很难理解。

圆的大小根据是否为活动步而变化,连接圆的线的颜色也根据状态而变化。我将如何完成?

回答:

您可以使用伪元素和相邻的同级选择器(~)来实现此效果,而无需额外的标记:

li {

width: 2em;

height: 2em;

text-align: center;

line-height: 2em;

border-radius: 1em;

background: dodgerblue;

margin: 0 1em;

display: inline-block;

color: white;

position: relative;

}

li::before{

content: '';

position: absolute;

top: .9em;

left: -4em;

width: 4em;

height: .2em;

background: dodgerblue;

z-index: -1;

}

li:first-child::before {

display: none;

}

.active {

background: dodgerblue;

}

.active ~ li {

background: lightblue;

}

.active ~ li::before {

background: lightblue;

}

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li class="active">4</li>

<li>5</li>

<li>6</li>

<li>7</li>

</ul>

以上是 创建由线连接的CSS3圆 的全部内容, 来源链接: utcz.com/qa/413866.html

回到顶部