#Barcamp : Pseudo-éléments en css

Le sujet de veille d’aujourd’hui concerne l’utilisation des pseudo-elements en CSS.

Les pseudo-elements, qu’est-ce que c’est ?

Les pseudo-elements sont utilisés pour pouvoir ajouter des éléments supplémentaires (fantômes) à l’élément ciblé et pouvoir y appliquer un style en particulier.

Pourquoi fantôme ?

Tout simplement parce que l’élément ajouté n’est pas présent dans la structure du DOM mais n’est visible que dans le css.

Petit exemple

A la suite de cette phrase, je souhaite ajouter la phrase tu plaisantes ? en gras et en rouge.

Pour cela, il existe le pseudo-element suivant ::after (ou :after). 

Voyons maintenant comment appliquer ce pseudo-element sur notre exemple.

Mise en place d’un pseudo-element

Dans le fichier CSS et devant l’élément concerné, ici le p, il suffit de placer l’instruction ::after et de lui indiquer ce que l’on souhaite faire.

Ici, la propriété content est nécessaire sans quoi le pseudo-element ::after (idem pour ::before) ne sert à rien. Si vous n’avez pas la nécessité d’ajouter de texte mais uniquement de modifier le style de l’élément ciblé, il suffit simplement de mettre une chaîne de caractères vide au niveau de la propriété content.

Petite remarque, il est tout à fait possible de ne mettre qu’un seul double point plutôt que 2 pour appliquer un pseudo-element mais depuis CSS3 cela permet de bien faire la différence entre les pseudo-classes (:) et les pseudo-elements (::).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.