Comment changer la couleur d'une puce sans changer celle du texte ?

Bonjour/Bonsoir !

Je débute en CSS3, suivant le tutoriel de Mathieu Nebra. Après plusieurs recherches qui ne donnent pas de résultats, j'aimerais exposer mes problèmes ici .

Oui, mes problèmes. J'en ai deux, et j'aimerais que vous m'aidiez, s'il vous plaît, à les résoudre. Voici le premier :

J'aimerais modifier la couleur d'une puce (square, disc, ... qu'on définit dans list-style-type) sans modifier celle du texte dans la liste. J'ai bel et bien trouvé des solutions, mais c'est de la bricolage ; j'aimerais trouver une solution dédiée à ce problème.

Et voici le second problème :

Comment laisser la puce d'une liste dans la position par défaut (tout à gauche) mais décaler le texte de la liste (par exemple : tout à droite) ?


J'espère que vous avez compris, sinon n'hésitez pas à me poser des questions pour plus de détails. Cordialement,

Triskelleton
Modifié par Triskelleton (06 Jul 2017 - 21:54)

Bonjour.

Il vaut certainement mieux que vous utilisiez "::before", c'est beaucoup plus souple et changer de couleur pour la puce ne pose pas de problèmes.

Pour la seconde question, j'ai du mal à comprendre l'intérêt - et à visualiser - mais avec ::before, je pense que c'est probablement faisable.


Modifié par Zelena (07 Jul 2017 - 08:29)

Pour répondre à ta deuxième question : il suffit d’un padding-left sur <li> avec la valeur voulue. Apparemment la puce est considérée comme un élément extérieur, donc elle n’est pas concernée par la marge intérieure.