0
128
Vistas2 marcadores diferentes en lista ordenada
Me enviaron esto como parte de una maqueta de proyecto para realizar, pero cuando se trata de este, no tengo idea de cómo hacer que esto suceda.
Tengo una lista ordenada en la que hay 2 marcadores diferentes con un punto con estilo, ¿alguien sabe cómo hacer que esto suceda?
Aquí hay una captura de pantalla de cómo debería verse
Y aquí hay un fragmento del código.
.pj__list { padding-left: inherit; li { font-weight: bold; } li::marker { content: #{$dot} counter(list-item) ". "; } } <ol class="pj__list"> <li class="my-2"> Bulletin de salaire </li> <li class="my-2"> Copie de la CIN </li> <li class="my-2"> Attestation de travail </li> </ol>
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Puede cambiar el estilo de la lista a viñetas y luego usar un contador para sus números:
.pj__list { list-style-type: disc; counter-reset: list; } .my-2 { counter-increment: list; padding-left: 1.5em; } .my-2:before { content: counter(list) "."; display: inline-block; width: 1.5em; margin-left: -1.5em; } <ol class="pj__list"> <li class="my-2">Bulletin de salaire</li> <li class="my-2">Copie de la CIN</li> <li class="my-2">Attestation de travail</li> </ol>si necesita que los discos sean de un color diferente, deberá agregar un lapso:
.pj__list { list-style-type: disc; counter-reset: list; } .my-2 { color: orange; } .my-2 span { color: black; display: inline-block; counter-increment: list; padding-left: 1.5em; } .my-2 span:before { content: counter(list) "."; display: inline-block; width: 1.5em; margin-left: -1.5em; } <ol class="pj__list"> <li class="my-2"><span>Bulletin de salaire</span></li> <li class="my-2"><span>Copie de la CIN</span></li> <li class="my-2"><span>Attestation de travail</span></li> </ol>
·
Juan Pablo Isaza
Denunciar
0
Esto es lo que hice para resolver este problema:
.my-2 { list-style-position: inside; } .my-2::before { content: "•"; float: left; padding-right: 5px; color: yellow; } <ol class="pj__list"> <li class="my-2"> Bulletin de salaire </li> <li class="my-2"> Copie de la CIN </li> <li class="my-2"> Attestation de travail </li> </ol>
·
Juan Pablo Isaza
Denunciar
0
Como inicialmente solo proporcionó HTML , mi sugerencia sería cambiar la lista a una lista desordenada y agregar manualmente los números
al igual que
<ul class="pj__list"> <li class="my-2">1. Bulletin de salaire</li> <li class="my-2">2. Copie de la CIN</li> <li class="my-2">3. Attestation de travail</li> </ul>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta