Como ajustar width do seletor :after

Front-end CSS
#1

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á!!

image
image.png1069×239 5.58 KB 

  .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;
}