Alignement d'une puce li personnalisée avec le texte

Question

J'essaie d'augmenter la taille du point de puce à côté d'un élément li. Le consensus semble être que la façon de procéder est de supprimer le point "standard", d'en insérer un personnalisé en utilisant le sélecteur :before, et d'augmenter la taille de la police du point inséré.

Eh bien, ce genre de travaux, mais cela signifie que le texte et le point deviennent mal alignés. Voir here pour mon code.

Existe-t-il un moyen de résoudre ce problème qui ne repose pas uniquement sur le codage en dur, en ce sens que le texte doit être déplacé de plusieurs pixels?

Answer 1

Set balle avec position:absolute

section { 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
    width: 300px; 
 
} 
 
ul { 
 
    font-family: 'Segoe UI'; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
li { 
 
    font-size: 22px; 
 
    line-height: 40px; 
 
    position: relative; 
 
    padding-left: 30px; 
 
} 
 
li::before { 
 
    content: "\2022"; 
 
    font-size: 70px; 
 
    vertical-align: middle; 
 
    position: absolute; 
 
    left: 0; 
 
}

<section> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 
</section>

Answer 2

I'D affichage est comme inline-table et changer le line-height.

section{ 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: center; 
 
    width: 300px; 
 
} 
 

 
ul{ 
 
    font-family: 'Segoe UI'; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
li{ 
 
    font-size: 22px; 
 
    line-height: 40px; 
 
} 
 
li::before{ 
 
    content: "\2022"; 
 
    font-size: 70px; 
 
    vertical-align: middle; 
 
    display: inline-table; 
 
    line-height: 0.4em; 
 
}

<section> 
 
    <ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    </ul> 
 
</section>