I have some difficulties styling my progress bar when I include links in an unordered list:
without links it is perfectly fine:
with links it is removing the progess bar:
I tried styling the a href in css, mainly playing with:
display:table-cell since imo table-cell is actually creating the progress line connections, but that did not work out so far. My code is here: https://jsfiddle.net/m7oak1wy/14/
I have done, what you have asked.
Please check the given below snippet.
Thanks
/* 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>OL(/UL) cannot contain other children but LI (you have some a in there).
A secret? Never style LI elements beyond needed.
Just style enough to set them horizontally / vertically, and move on styling their inner elements.
I.e. instead, if you style the inner A elements you can gain a larger clickable UI element (= great UI)
HTML
<ol class="etapier"> <li class="done"><a href="">1.</a></li> <li class="done"><a href="">2.</a></li> <li class="todo"><a href="">3.</a></li> <li class="done"><a href="">4.</a></li> <li class="done"><a href="">5.</a></li> </ol> CSS :
/* 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 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 a { position :relative; } ol.etapier li a:before { position: absolute; bottom: -23px; left: 0; margin-left:-5px; color: white; height: 15px; width: 15px; line-height: 15px; border: 2px solid silver; border-radius: 15px; } ol.etapier li.done a:before { content: "\2713"; color: white; background-color: green } ol.etapier li.todo a:before { content: " " ; background-color: white; } 
7.5px will not work (exactly). px are not % Round to integers.<ol class="etapier"> <li class="done"><a href="">1.</a></li> <li class="done"><a href="">2.</a></li> <li class="todo"><a href="">3.</a></li> <li class="done"><a href="">4.</a></li> <li class="done"><a href="">5.</a></li> </ol> you use anchor in li this will fine to work check with this below code as you required and it may help you.
/* 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 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; } .etapier li a { position: absolute; top: 0px; right: 45%; padding: 20px; }<ol class="etapier"> <li class="done">1.<a href=""></a></li> <li class="done">2.<a href=""></a></li> <li class="todo">3.</li> <li class="done">4.<a href=""></a></li> <li class="done">5.<a href=""></a></li> </ol>