z-index:-1
隐藏fa图标后的内容。
我想隐藏勾选图标下的行
我目前拥有的:
.application-intro a {
color: inherit !important;
}
.application-intro .step-icons {
color: #4c5280;
font-size: 4rem;
/* width: 80px; */
margin-bottom: 20px;
margin-right: 5px;
border: solid 1px transparent;
/* width: 20px; */
}
.application-intro ul {
text-align: center;
}
.application-intro ul li {
display: inline-block;
width: 30%;
position: relative;
}
.application-intro .progress-icon {
color: #ccc;
padding: 5px;
/* width: 80px; */
font-size: 1.5rem;
}
.application-intro .progress-icon::after {
content: '';
background: #ccc;
height: 5px;
width: 110%;
position: absolute;
left: 0;
/* z-index: -1; */
/* top: 125px; */
top: 103px;
}
.application-intro span {
width: 30%;
display: table;
font-size: 0.7rem;
margin-left: 36%;
}
.application-intro li:nth-child(2) .progress-icon {
color: #148e14;
}
.application-intro li:nth-child(2) .progress-icon::after {
background: #148e14;
}
.application-intro li:first-child .progress-icon::after {
width: 95%;
left: 52%;
}
.application-intro li:last-child .progress-icon::after {
width: 48%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="application-intro">
<ul>
<li><a class="btn" id="fill-application" href=""><i class="fas fa-file-pen step-icons"></i></a><br><i class="fas fa-circle-check progress-icon"></i><span>Lorem Ipsum is simply dummy text</span></li>
<li><a class="btn" id="submit-kyc" href=""><i class="fas fa-file-arrow-up step-icons"></i></a><br><i class="fas fa-circle-check progress-icon"></i><span>Lorem Ipsum is simply dummy text</span></li>
<li><a class="btn" id="match-financial" href=""><i class="fas fa-magnifying-glass step-icons"></i></a><br><i class="fas fa-circle-check progress-icon"></i><span>Lorem Ipsum is simply dummy text Lorem Ipsum is simply dummy text</span></li>
</ul>
</div>
https://jsfiddle.net/JasperEl/ec95zg7n/5/
z索引上的负值在这里不起作用。我期待着一个解决方案。
先谢谢你了。
2条答案
按热度按时间a1o7rhls1#
使用
content-box
的背景剪辑(使用border-radius:50%
四舍五入),然后返回z索引。可能出现一些子像素轮廓。但更好解决方案是为条形图构建具有单独元素的图形。
cpjpxq1n2#
使用位置
relative
和z-index 1
作为.fa-circle-check::before
元素。但是你应该选择另一个内容,因为你的内容在中间是透明的,你的after
元素从你的before
元素的透明区域中挑选出来。只要改变你的一个元素的颜色后,应用定位,所以你可以明白我的意思。