Les pseudo-éléments « :before » et « :after »

pseudo-elements

Cet article est destiné à tous ceux qui ont pu découvrir les nombreuses choses intéressantes que l’on peut réaliser avec les pseudo-éléments et veulent connaître davantage sur la technique.

Il faut savoir que la spécification CSS contient différents pseudo-éléments.
Pour cet article, nous allons nous concentrer sur « :before » et « :after ». Pour éviter les malentendus, les pseudo-éléments dont nous parlerons ici se réfèrent uniquement à ces deux mentionnés ci-dessus.

Qu’est-ce qu’un pseudo-élément?

Comme son nom l’indique, un pseudo-élément est un élément factice. Celui-ci s’insère avant ou après le contenu de l’élément ciblé.
Il faut savoir que celui-ci ne change rien dans le document.
En effet, celui-ci ne fait qu’insérer des éléments qui ne sont véritablement pas de véritables éléments, mais qui seront visibles par les utilisateurs. On pourra appliquer un style CSS sur ces éléments « fantômes ».

La syntaxe basique des pseudo-éléments « :before » et « :after »

Ces 2 pseudo-éléments sont très faciles à utiliser comme le montre l’exemple qui suit :

On peut noter deux choses à propos de l’exemple précédent. Tout d’abord, nous ciblons ici le même élément en utilisant « #test:before » et « #test:after ». Ces derniers sont les pseudo-éléments dans ce code.
Puis, il faut savoir que sans la propriété « content: », les pseudo-éléments n’ont aucune utilité. En effet, il y rien d’insérer tant que la propriété « content: » n’a pas été ajoutée.

A propos de la syntaxe

Il faut que vous sachiez qu’il est possible de traiter le pseudo-élément comme une boîte vide en laissant la propriété « content: » vide :

Cependant, il est impératif de garder la propriété « content: » sans quoi le pseudo-élément serait inutilisable. Au minimum, cette propriété doit contenir des guillemets vides.

Les caractéristiques du contenu inséré

Le contenu inséré ne sera pas visible dans la source de la page et sur Firebug aussi. Il n’est visible que dans le CSS.

L’élément inséré est un élément inline par défaut. Ainsi, pour lui donner un padding, une hauteur, des marges ou autres, il sera nécessaire de le définir explicitement comme un élément block.

Il est à noter également que les règles d’héritage CSS s’appliquent bel et bien aux éléments insérés. Dans le cas où une police de caractères Times New Roman, Arial, Calibria été défini pour l’élément body du document, le pseudo-élément héritera lui aussi de la police comme n’importe quel élément.

De la même manière, les pseudo-éléments n’héritent pas des styles qui ne sont pas hérités de leurs parents comme les marges et les paddings.

Il a été constaté qu’il est possible de donner une valeur textuelle à la propriété « content: » y compris une chaîne de caractères vide entre les guillemets. Il est également possible d’inclure un lien URL pointant vers une image.

Répondre