我想创建一个进度条,但是CSS出现问题。
我希望圆圈被线遮住,但不起作用。
演示如下:
HTML:
Access List -> Modules:
File>Filelist ... yes
Access List -> Tables (listing):
File Metadata ... yes
File Reference ... yes
File Storage ... yes
Access List -> Tables (modify):
File ... yes
File Collection ... yes
File Metadata ... yes
File Reference ... yes
File Storage ... yes
Access List -> Allowed excludefields:
File Metadata: yes to all
File Collection: yes to all
Access List -> Limit to languages ... yes to all
ol {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
display: table-cell;
text-align: center;
}
li:after {
content: "";
position: relative;
z-index: 1000;
display: block;
width: 2em;
height: 2em;
margin: 0 auto;
line-height: 2em;
color: #fff;
border: 0.2em #e1e1e1 solid;
border-radius: 100%;
}
li:not(:last-child):before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
width: 100%;
height: 0.2em;
background-color: #e1e1e1;
}
答案 0 :(得分:2)
如果我对您的理解正确,则只需在&:after选择器上设置background-color
而不是color
&:after {
background-color: #fff;
}
答案 1 :(得分:1)
只需为您的圈子添加背景:
ol {
display: table;
table-layout: fixed;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
li {
position: relative;
display: table-cell;
text-align: center;
}
li:after {
content: "";
position: relative;
z-index: 1000;
display: block;
width: 2em;
height: 2em;
margin: 0 auto;
line-height: 2em;
color: #fff;
border: 0.2em #e1e1e1 solid;
border-radius: 100%;
background:white; /* add this */
}
li:not(:last-child):before {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
display: block;
width: 100%;
height: 0.2em;
background-color: #e1e1e1;
}
<ol>
<li>
Order received
</li>
<li>
Order received
</li>
<li>
Order received
</li>
<li>
Order received
</li>
<li>
Order received
</li>
</ol>
答案 2 :(得分:0)
将背景色添加到
&:after {background:#fff;}
,您的代码即可正常工作。