Vous les avez surement déjà vu plusieurs fois dans votre expèrience dans le développement front-end, sans vraiment connaître toutes les possibilités qu’ils offrent. Et il y en a ! Mais attention, on utilise dans des intentions purement décoratives. Évitez de vouloir gérer du contenu important avec ces pseudos-éléments. Ce n’est que pour la déco !
Il existe de nombreux autres pseudo-éléments. En voici la liste, ici. Dans cet article, nous allons nous interesser qu’à ces deux derniers :
::before
::after
Pour commencer, un pseudo-élément dépend toujours d’un élément préalable (nan mais sans dèc..!) :
ELEMENT ::after{…}
Exemple : a::before{...}
.maClasse::after{...}
#monId::before{...}
Lors du passage en CSS3, on a voulu distinguer les pseudo-classes « :hover », « first-child », etc… des pseudos-éléments. La notation diffère donc selon la version css. Mais jusqu’à présent, les navigateurs s’en fichent. Vous pouvez toujours ecrire « :after ».
– CSS 3 ::before
– CSS 2 :before
Mais concretement, qu’est-ce qu’on peut faire avec ?
Des animations interactives « whouahou »
Vous pouvez réaliser des animations interactives élaborées, comme des dégradés au survol d’un bloc ou d’une image.
Par exemple : https://bryanlrobinson.com/blog/how-to-css-after-elements-for-background-overlays/
Enrichir l’affichage des liens avec un icone
Vous pouvez personnaliser l’affichage des liens de votre site à l’aide d’un icone. Par exemple, afficher l’icone « PDF » au début de tous les liens de votre projet web pointant sur des fichier dont l’extension est « .pdf »
a[href$=".pdf"]::after {
content: " (pdf)";
font-size: .8em;
color: tomato;
}
https://la-cascade.io/les-pseudo-elements-css-before-et-after/
Liens
https://bryanlrobinson.com/blog/top-3-uses-of-after-and-before-css-pseudo-elements/
https://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice