I run into the following problem:
I have a progress bar steps (step progress bar), inside the css includes :before and :after works rather in html, unfortunately when I incorporate it in the editor script, I do not follow the rules
this is the code, as you can see it works perfectly:
.container-bar {
width: 100%;
margin-top: 20px;
}
.progressbar {
counter-reset: step;
}
.progressbar li {
list-style-type: none;
float: left;
width: 33.33%;
position: relative;
text-align: center;
color: #888;
}
.progressbar li:before {
color: #888;
content: counter(step);
counter-increment: step;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid #ddd;
border-radius: 50%;
display: block;
text-align: center;
margin: 0 auto 10px auto;
background-color: #eee;
box-shadow: inset 0px 0px 0px 2px white;
}
.progressbar li:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: #ddd;
top: 15px;
left: -50%;
z-index: -1;
}
.progressbar li:first-child:after {
content: none;
}
.progressbar li.active {
color: #13e700;
}
.progressbar li.active:before {
border-color: #13e700;
color: #FFFFFF;
background-color: #13e700;
content: "13 ";
font-weight: 400;
}
.progressbar li.active + li:after{
background-color: #13e700;
}
.progressbar li.waiting {
color: #1d9eff;
}
.progressbar li.waiting:before {
border-color: #1d9eff;
background-color: #1d9eff;
color: white;
}
.progressbar li.waiting + li:after {
background-color: #1d9eff;
}<div class="container-bar">
<ul class="progressbar">
<li class="active" id="1">
step 1
</li>
<li class="waiting" id="2">
step 2
</li>
<li id="3">
step 3
</li>
</ul>
</div> but when I insert it into the scrip editor this happens to me
As you can see the :after disappears and the steps do not connect me, would someone know how to tell me why this happens and if there is any way to make it work?