Guillaume Deschamps
Sorcier du web - developpeur web fullstack

Les pouvoirs des pseudo-éléments ::before et ::after

catégorie -

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://css-tricks.com/almanac/selectors/a/after-and-before/

https://la-cascade.io/les-pseudo-elements-css-before-et-after/

https://css-tricks.com/css-content/
https://css-tricks.com/pseudo-element-roundup/
Liens

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