Considere o código HTML a seguir.

<div id="composicao" posicao="0">
  <p posicao="1"> MPF </p><br/>
  <p posicao="2"> MPT </p><br/>
  <p posicao="3"> MPM </p><br/>
  <p posicao="4"> MPDFT </p><br/>
</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: