Fala pessoal. Sou iniciante em CSS e estou tendo dificuldade em ajustar o width de uma timeline que estou criando, vcs podem ver como ela está na imagem, assim como o código. Preciso que a barra acabe no último tópico, mas ela continua ao infinito. Achei que usando content:none no last child ia resolver, mas acontece que esse segmento que continua depois do último tópico é da penúltima li. Usei width 100% esperando que ele “entenderia” que é 100% da li, mas está calculando 100% de não sei o que. Essa class .timeline-steps é da ul que criei. Vocês conseguem me ajudar? Agradeço desde já!!
.timeline-steps {
position: relative;
display: flex;
justify-content: space-between;
z-index: 2;
}
.timeline-steps li:before {
content: "";
display:block;
background-color: #EDF6F9;
margin: auto;
width: 20px;
height:20px;
border-radius: 50%;
border: solid 2px black;
}
.timeline-steps li:hover:before, .timeline-steps li.active:before {
background-color: #006D77;
}
.timeline-steps li:after {
content: "";
position: absolute;
width: 100%;
height: 2px;
top: 10px;
z-index: -1;
background-color: black;
}
.timeline-steps li:last-child:after {
content: none;
}