Lorsque l’on est amené à gérer l’intégration graphique d’un projet web, il existe plusieurs procédés pour insérer un élément décoratif sur une page ou un bloc. L’un de ces procédés consiste en l’utilisation des pseudo-éléments.
Cette technique a pour but d’ajouter un contenu esthétique juste en utilisant du CSS. De ce fait, nous n’avons pas besoin d’ajouter des balises HTML pour adapter le style, ce qui allège la structure de la page et son chargement. Nous allons voir dans cet article les différents types de pseudo-éléments qui existent, notamment les :before et :after qui peuvent s’avérer très utiles lors de l’intégration graphique.
Qu’est-ce qu’un pseudo-élément ?
Mais avant de rentrer dans le vif du sujet, il est important de définir ce que sont les pseudo-éléments. Ils servent à ne cibler qu’un morceau de l’HTML afin de faciliter sa mise en forme sans modification de cet HTML. Cela est différent des pseudo-classes qui elles servent à changer le style de l’état d’un élément HTML (:hover, :focus …).
Il existe de nombreux pseudo-éléments, mais tous ne fonctionnent pas sur tous les navigateurs. Les plus courants sont:
- first-letter : met en forme la 1ère lettre d’un paragraphe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla laoreet lacus sit amet convallis.
- first-line: met en forme la 1ère ligne d’un paragraphe
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fringilla laoreet lacus sit amet convallis. In nec aliquet ante. Pellentesque fermentum gravida ex.
- placeholder: met en forme les placeholders des inputs HTML
- selection: met en forme l’apparence du texte lorsque celui-ci est surligné par l’utilisateur
Mais ceux qui sont régulièrement utilisés sont les pseudo-éléments ::before et ::after. Cela ajoute un contenu HTML sans toucher à celui-ci, directement en CSS. Ces éléments peuvent insérer du contenu textuel ou pictural avant ou après la balise visée.
a::before {
content:"Lorem Ipsum";
color: #000;
}
Il est possible d’assigner un ::before et un ::after sur la même balise afin de lui ajouter deux types de contenus différents s’il y en a besoin. Les ::before et les ::after ont la même utilité, la seule différence étant la position native du contenu que l’on rajoute. En effet, le contenu ajouté est en inline et se positionne avant ou après l’élément sélectionné selon la propriété que l’on utilise.
A noter qu’il faut obligatoirement une propriété “content” à l’intérieur (même vide), sans quoi le pseudo-élément ne s’affichera pas.
Dans quels cas utiliser des pseudo-éléments ::before et ::after ?
Nous avons souvent besoin d’ajouter un picto, une forme ou une image décorative sur un bloc. Les pseudo-éléments ::before et ::after sont parfaits pour faire ce genre de chose : cela permet d’ajouter un style complexe à une balise sans modifier (et donc alourdir) l’HTML.
Ils sont souvent utilisés dans les projets web, et voici les exemples les plus courants de leur utilisation :
- insérer une forme dans un bloc :
::before {
content: "";
background: #ccc
width: 50px;
height: 50px;
position: absolute;
top: 5px;
left: 5px;
}
- insérer une image après un élément :
::after {
content: "";
background: url('../background.png');
width: 20px;
height: 10px;
}
- insérer un élément textuel avant ou après un élément :
::after {
content: "€";
font: 16px Arial;
color: #ccc;
}
- insérer un contenu à partir d’un attribut HTML. Cela peut être utilisé pour afficher le title d’un lien ou le texte alt d’une image par exemple. Dans cet exemple on affiche l’url d’un lien:
::before {
content: attr(href);
}
- insérer un picto à partir d’une font de picto. Comme nous avont pu le voir dans un autre article, il est possible de gérer les pictos via une font. Pour les appeler, nous utilisons ces pseudo-éléments.
::before {
content: "\e90a";
font: 16px custom-font;
color: #ccc;
}
Pour information il est tout a fait possible de cumuler un pseudo-élément et une pseudo-classe lorsque l’on définie un style :
button:hover::after {
color: red;
}
Dans cet exemple, le pseudo-élément :after sera coloré en rouge lorsque le bouton est survolé.
Vu que ces éléments ne seront pas présents dans le DOM, il est important de noter qu’ils ne seront pas référencés. Ils ne seront pas non plus accessibles pour les personnes en situation de handicap utilisant un lecteur d’écran. De plus, ils ne seront pas pris en compte par les systèmes de traduction automatique. C’est pour cela qu’il est plutot déconseillé d’ajouter du texte via les pseudo-éléments, mais uniquement des objets décoratifs qui ne seront pas nécessaire à la compréhension de la page.
Attention cependant, il n’est pas possible d’utiliser des pseudo-éléments sur des éléments vides (qui ne peuvent pas avoir d’élément enfant) : ils ne fonctionneront donc pas sur des balises images ou sur des input.
Sources :
