Considere o código HTML a seguir.
<div id="composicao" posicao="0">
<p posicao="1"> MPF </p>
<p posicao="2"> MPT </p>
<p posicao="3"> MPM </p>
<p posicao="4"> MPDFT </p>
</div>
E o respectivo código CSS:
div { display: flex;
flex-direction: row-reverse;
} p[posicao]::after { content: "|";
} #composicao p::before { content: attr(posicao);
}
Após renderizar o código acima, um navegador web padrão exibe a linha: