时间戳

首页 > 解决方案 > 如何在其上方创建带有正确符号图标的时间线，并在完成步骤后填写

css - 如何在其上方创建带有正确符号图标的时间线，并在完成步骤后填写

问题描述

我正在创建一条线（时间线）中相互连接的圆圈，我还想在它们上方创建正确的标志图标，并且它们必须在完成每个步骤后填充。

CSS

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;
}

html

<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>

我已经附加了文件，因为我想创建设计 Right Icons

标签： csshtmlresponsive-design

解决方案

我建议使用 font awesome 来制作正确的标志图标。Font Awesome 是 CSS 轻量级图标库

<i class="fas fa-right" id="righticon" style="display:none;"></i>

这是使用 font awesome 的方法，也可以使用 javascript 在完成时启用正确的标志。首先，您必须禁用正确的图标并在完成时启用这里是 javascript 代码。

var rightsign = document.getElementById("righticon").style.display="block";

到这里就完成了。。谢谢

推荐阅读