Admin/Dev

21
Juin
2018

Astuce CSS : Personnaliser simplement vos listes à puces, sans image

Publié par sky

Les listes à puces, c'est pratique, on peut s'en servir partout et cela permet de structurer rapidement et simplement des points clés.

De base, les CSS permettent de customiser rapidement et simplement les listes à puces, il est possible d'avoir des ronds, des carrés, ou de les transformer en liste numérotée. Mais tout cela reste très ... gris. Sinon, comme sur ce site, il est aussi possible d'utliser des images pour les égailler un peu.

Mais il existe une solution intermédiaire, qui permet d'approfondir la customisation des listes à puce sans avoir recours aux images.

La solution vient tout simplement de l'utilisation des pseudos classes, et en particulier "before".

Pour commencer, supprimons le symbole par défaut

ul {
    list-style:none;
}

puis ajoutons notre symbole, par exemple, un signe moins, que l'on souhaite rouge dans la pseudo-classe "before" de nos éléments de liste.

ul {
   list-style:none;
} li:before {
   content:"-";    color:red;
}

et voila, c'est bien, mais cela n'est pas aussi parfait que l'on pourrait le souhaiter.

Afin de conserver un alignement des puces, en avant du contenu, nous allons forcé le déplacement de la puce

ul {
   list-style:none;
} li:before {
   content:"-";    color:red;    position:relative;    left:-16px;
}

La valeur de "left" devra être ajusté selon le design souhaité et la taille du caractère utilisé.

La puce peut alors sortir de son cadre, il faut donc déplacer l'ensemble de la puce vers la droite pour compenser.

ul {
   list-style:none;
} li {
   padding-left:12px;
} li:before {
   content:"-";    color:red;    position:relative;    left:-16px;
}

La valeur de "padding-left" sera ajustée, en fonction de la valeur de "left" vue précédement.

Enfin pour terminer, il faut faire en sorte que le texte reste bien aligné, même lorsqu'il passe sur plusieurs lignes. Pour cela, il faut tricher un peu, en supprimant toute taille de notre puce personalisée

ul {
   list-style:none;
} li {
   padding-left:12px;
} li:before {
   content:"-";    color:red;    position:relative;    left:-16px;    width:0;    overflow:visible;    display:inline-block;
}

 

Petit bonus, si vous voulez utiliser des caractères de type symboles, il ne suffit pas d'y mettre le caractère HTML. Par exemple, pour un tilde, cela ne marcherait pas

li:before {
   content:"&;tild;";
}

il faut utiliser son caractère au format hexadécimal

li:before {
   content:"0007E";
}

Et pour ne pas se tromper, il suffit de prendre une page comme celle-ci, pour obtenir la valeur hexadécimale de votre caractère et lui mettre sa valeur complète  tel que :

  • 7E devient 0007E pour le tilde

ou encore

  • 2022 devient 02022 pour le tilde
 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer