Seu próximo nível começa aqui
Seu desenvolvimento não pode ter limites. Garanta sua Assinatura Ilimitada e libere uma preparação completa com os melhores professores do Brasil.
Considere o código HTML a seguir.<div id="composicao"...
Considere o código HTML a seguir.
<div id="composicao" posicao="0">
<p posicao="1"> MPF </
<p posicao="2"> MPT </
<p posicao="3"> MPM </
<p posicao="4"> MPDFT </
</
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:
A
MPF |MPT |MPM |MPDFT
B
0| MPF | MPT | MPM | MPDFT |
C
4 MPDFT |3 MPM|2 MPT|1 MPF |
D
4| MPDFT 3| MPM 2| MPT 1| MPF
E
0| 0 MPDFT |0 MPM|0 MPT|0 MPF |