html - 进度条 CSS 样式问题

Question

当我在无序列表中包含链接时，我在设置进度条样式时遇到了一些困难:

没有链接就完全没问题了:

对于链接，它正在删除进度条:

我尝试在 css 中设置 a href 的样式，主要是玩:

    display:table-cell 

因为 imo table-cell 实际上是在创建进度线连接，但到目前为止还没有成功。我的代码在这里:https://jsfiddle.net/m7oak1wy/14/

Answer 1

我已经做到了，你所要求的。

请检查下面给出的片段。

谢谢

/* CHANGE COLOR HERE */ 
ol.etapier li.done {
  border-color: yellowgreen ;
}
/* CHANGE COLOR HERE */ 
ol.etapier li.done:before {
    background-color: yellowgreen;
    border-color: yellowgreen;
}


ol.etapier {
    display: table;
    list-style-type: none;
    margin: 0 auto 20px auto;
    padding: 0;
    table-layout: fixed;
    width: 100%;
}
ol.etapier a {
    display: table-cell;
    text-align: center;
    white-space: nowrap;
    position: relative;
}
ol.etapier a li {
    display: block;
    text-align: center;
    white-space: nowrap;
    position: relative;
}
ol.etapier li {
    display: table-cell;
    text-align: center;
	padding-bottom: 10px;
    white-space: nowrap;
    position: relative;
}

ol.etapier li a {
	color: inherit;
}

ol.etapier li {
    color: silver; 
    border-bottom: 4px solid silver;
}
ol.etapier li.done {
    color: black;
}

ol.etapier li:before {
    position: absolute;
    bottom: -11px;
    left: 50%;
    margin-left: -7.5px;

    color: white;
    height: 15px;
    width: 15px;
    line-height: 15px;
    border: 2px solid silver;
    border-radius: 15px;
    
}
ol.etapier li.done:before {
    content: "\2713";
    color: white;
}
ol.etapier li.todo:before {
    content: " " ;
    background-color: white;
}

<ol class="etapier">
    <a href=""><li class="done">1.</li></a>
    <li class="done">2.</li>
    <li class="todo">3.</li>
    <li class="done">4.</li>
    <li class="done">5.</li>
</ol>