Exemple de l’utilisation de :first-letter
La pseudo élément :first-letter permet d’agir en CSS uniquement sur la première lettre de l’élément visé de la façon suivante :
h3:first-letter {font-size: 4em; color: red;}
Cas où le pseudo élément :first-letter ne fonctionne pas
:first-letter ne va pas fonctionner si :
- Le premier élément du bloc sélectionné (dans notre exemple ci dessus un h3) n’est pas une lettre (s’il y a une image, ou une icône avant la première lettre)
- Si le bloc sélectionné n’est pas de type block . Par exemple ce pseudo élément ne va pas fonctionner sur un élément span. Dans ce cas, il existe cependant une solution qui est d’assigner la propriété block au span.
Exemple ci dessous pour un span de class « span-block »
span.span-block:first-letter {color:red;}
span.span-block {display: block;}
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!