CSS : Pseudo-éléments :Before et :After

Photo de profil de Cédric Chevillard

Besoin d’un conseil pour votre site internet ?

Expert Elementor

En tant qu'expert en Elementor, je propose mon aide pour optimiser la conception, la personnalisation et la performance de votre site web avec ce plugin.

Aujourd’hui, nous allons explorer les pseudo-éléments CSS :before et :after. Ces outils puissants permettent d’ajouter du contenu avant ou après un élément HTML sans modifier le HTML lui-même, offrant ainsi de nombreuses possibilités créatives et pratiques.

Le CSS, ou Cascading Style Sheets, est essentiel pour styliser vos pages web. Grâce à :before et :after, vous pouvez enrichir vos designs avec des icônes, des bordures décoratives, des animations, et bien plus encore.

Maîtriser cette notion peut être un atout considérable dans la création de sites internet.

Dans cet article, je vous montrerai des exemples concrets et des astuces pour utiliser ces pseudo-éléments de manière efficace. Que vous soyez débutant ou développeur expérimenté, vous trouverez des conseils pratiques pour améliorer vos compétences en CSS.

Plongeons ensemble dans l’univers des pseudo-éléments CSS et découvrons comment :before et :after peuvent transformer vos projets web !

Qu’est-ce que les pseudo-éléments CSS « :before » et « :after » ?

Les pseudo-éléments CSS :before et :after sont des outils incroyablement utiles pour les développeurs web.

Ils permettent d’insérer du contenu avant ou après le contenu d’un élément HTML, sans avoir à modifier le HTML lui-même.

Cette fonctionnalité est particulièrement puissante pour ajouter des éléments décoratifs ou fonctionnels à une page web.

Définition et syntaxe

Les pseudo-éléments :before et :after sont utilisés en CSS pour cibler des parties spécifiques d’un élément et y ajouter du contenu ou des styles. Voici comment ils sont définis :

  • :before ajoute du contenu avant l’élément ciblé.
  • :after ajoute du contenu après l’élément ciblé.

La syntaxe de base pour utiliser ces pseudo-éléments est la suivante :

  element::before {
      /* Styles et contenu pour le pseudo-élément :before */
      content: 'Texte ou autre contenu';
  }

  element::after {
      /* Styles et contenu pour le pseudo-élément :after */
      content: 'Texte ou autre contenu';
  }

Le mot-clé content est essentiel lorsque vous utilisez :before et :after, car il spécifie le contenu à insérer. Ce contenu peut être du texte, des icônes, des images, ou même rien du tout si vous souhaitez uniquement appliquer des styles.

Pourquoi utiliser les pseudo-éléments ?

L’utilisation de :before et :after présente plusieurs avantages :

  1. Séparation du contenu et de la présentation : Vous pouvez ajouter des éléments de style sans altérer la structure HTML, ce qui rend votre code plus propre et plus facile à maintenir.
  2. Flexibilité : Ils offrent une grande flexibilité pour ajouter des détails décoratifs comme des guillemets autour de citations, des icônes avant les liens, ou des séparateurs visuels.
  3. Performance : En ajoutant des éléments via CSS, vous réduisez la quantité de HTML à charger, ce qui peut améliorer les performances de votre site.

Passons maintenant aux cas pratiques et n’oubliez pas que cela est applicable sur un site internet créé à la main, avec WordPress, Symfony, etc.

Exemple 1 : Surligner un titre avec :after

Dans cet exemple, nous allons voir comment utiliser le pseudo-élément :after pour ajouter un effet de surlignage à un titre. Cela permet de mettre en valeur un titre de manière élégante et moderne.

HTML

Commençons par notre structure HTML de base. Nous avons un titre <h2> auquel nous voulons ajouter un surlignage :

	
	<h2 class="highlight">Surlignez ce titre avec CSS</h2>

CSS

Maintenant, ajoutons le CSS pour créer l’effet de surlignage. Nous allons utiliser le pseudo-élément :after pour ajouter une ligne colorée sous le texte du titre.

  .highlight {
    position: relative;
    display: inline-block;
    font-size: 2em;
    margin-bottom: 20px;
  }

  .highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 3px;
    background-color: #4C89F8;
  }

Explications

  1. Positionnement relatif du titre : Nous appliquons position: relative à l’élément <h2> pour que le pseudo-élément :after soit positionné par rapport à ce titre.
  2. Création du pseudo-élément :after :
    • content: '' : Nécessaire pour que le pseudo-élément soit généré.
    • position: absolute : Permet de positionner le pseudo-élément par rapport à son parent (le titre <h2>).
    • left: 0 et bottom: -5px : Positionne le pseudo-élément en bas à gauche du titre, avec un léger décalage vers le bas pour qu’il apparaisse sous le texte.
    • width: 100% et height: 3px : Donne une largeur totale sous le titre et une hauteur de 3px pour la bordure.
    • background-color: #4C89F8 : Applique une couleur de fond jaune pour la bordure.

Rendu

Surlignez ce titre avec CSS

Exemple 2 : Créer des icônes avec des pseudo-éléments

Dans cet exemple, nous allons utiliser les pseudo-éléments :before et :after pour ajouter des icônes avant des éléments de menu. Cette technique est utile pour enrichir visuellement votre interface utilisateur sans ajouter de balises HTML supplémentaires.

HTML

Commençons par notre structure HTML de base. Nous avons une liste de navigation simple :

  <ul class="mon-menu">
    <li class="mon-menu-item">Accueil</li>
    <li class="mon-menu-item">Services</li>
    <li class="mon-menu-item">Contact</li>
  </ul>

CSS

Maintenant, ajoutons le CSS pour créer des icônes avant chaque élément de menu en utilisant le pseudo-élément :before.

  .mon-menu {
      list-style: none;
      padding: 0;
  }

  .mon-menu-item {
      position: relative;
      padding-left: 30px; /* Espace pour l'icône */
      font-size: 1.2em;
      margin: 10px 0;
  }

  .mon-menu-item::before {
      content: '\1F4CC'; /* Icône d'épingle (📌) */
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.2em;
  }

Explications

  1. Suppression des styles de liste par défaut : En utilisant list-style: none, nous supprimons les puces par défaut des éléments de la liste.
  2. Positionnement des éléments de menu : En ajoutant position: relative aux éléments de menu, nous permettons au pseudo-élément :before de se positionner par rapport à chaque élément de menu.
  3. Espace pour l’icône : Avec padding-left: 30px, nous créons un espace à gauche de chaque élément de menu pour insérer l’icône.
  4. Création de l’icône avec :before :
    • content: '\1F4CC' : Utilise un caractère Unicode pour représenter une icône d’épingle (📌). Vous pouvez remplacer ce code par n’importe quel caractère Unicode ou même du texte.
    • position: absolute : Permet de positionner l’icône par rapport à l’élément de menu.
    • left: 0 et top: 50% : Positionne l’icône à gauche de l’élément de menu et la centre verticalement.
    • transform: translateY(-50%) : Centre l’icône verticalement par rapport à l’élément de menu.
    • font-size: 1.2em : Assure que l’icône est de la même taille que le texte de l’élément de menu.

Rendu

  • Accueil
  • Services
  • Contact

Exemple 3 : Obscurcir une image avec un fond sombre en utilisant :before

Dans cet exemple, nous allons utiliser le pseudo-élément :before pour ajouter un fond sombre semi-transparent sur une image, créant ainsi un effet d’obscurcissement.

HTML

Commençons par notre structure HTML de base. Nous avons une image contenue dans un élément <div>.

	<div class="image-container">
        <img src="votre-image.jpg" alt="Description de l'image">
        <div class="text-overlay">Votre texte ici</div>
    </div>

CSS

Maintenant, ajoutons le CSS pour créer l’effet d’obscurcissement avec le pseudo-élément :before.

  .image-container {
      position: relative;
      display: inline-block;
  }

  .image-container img {
      display: block;
      width: 100%;
      height: auto;
  }

  .image-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Couleur noire avec 50% d'opacité */
      z-index: 1; /* Positionne le pseudo-élément au-dessus de l'image */
  }

  .text-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 1.5em;
      text-align: center;
      z-index: 2; /* Positionne le texte au-dessus du pseudo-élément */
  }

Explications

  1. Positionnement relatif du conteneur d’image : En appliquant position: relative à l’élément <div> contenant l’image, nous permettons au pseudo-élément :before d’être positionné par rapport à ce conteneur.
  2. Affichage de l’image : Nous veillons à ce que l’image occupe la totalité de la largeur du conteneur avec display: block et width: 100%.
  3. Création du pseudo-élément :before :
    • content: '' : Nécessaire pour que le pseudo-élément soit généré.
    • position: absolute : Permet de positionner le pseudo-élément par rapport à l’élément parent (.image-container).
    • top: 0, left: 0, width: 100%, height: 100% : Fait en sorte que le pseudo-élément couvre toute la surface du conteneur.
    • background-color: rgba(0, 0, 0, 0.5) : Applique une couleur de fond noire avec une opacité de 50% pour créer l’effet d’obscurcissement.
    • z-index: 1 : Place le pseudo-élément au-dessus de l’image mais en dessous du texte.
  4. Positionnement du texte superposé : Nous utilisons position: absolute et des transformations pour centrer le texte au milieu du conteneur. Le z-index: 2 place le texte au-dessus du pseudo-élément :before.

Rendu

Image décoratrice pour montrer l'exemple 3 : obscurcir une image avec un fond sombre en utilisant :before
Votre texte ici

Exemple 4 : Créer des effets de survol

Dans cet exemple, nous allons utiliser les pseudo-éléments :before et :after pour créer des effets de survol sur des boutons. Ces effets peuvent améliorer l’interactivité et l’attrait visuel de votre site web.

HTML

Commençons par notre structure HTML de base. Nous avons un bouton que nous allons styliser avec des effets de survol :

	<button class="hover-effect-btn">Survolez-moi</button>

CSS

Maintenant, ajoutons le CSS pour créer les effets de survol avec les pseudo-éléments :before et :after.

  .hover-effect-btn {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.2em;
    color: #fff;
    background-color: #007BFF;
    border: none;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.3s ease;
  }

  .hover-effect-btn::before,
  .hover-effect-btn::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    background-color: rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
    border-radius: 50%;
  }

  .hover-effect-btn::before {
    z-index: 1;
  }

  .hover-effect-btn::after {
    z-index: 2;
  }

  .hover-effect-btn:hover::before,
  .hover-effect-btn:hover::after {
    transform: translate(-50%, -50%) scale(1);
  }

  .hover-effect-btn:hover {
    color: #007BFF;
    background-color: #fff;
    border: 2px solid #007BFF;
  }

Explications

  1. Positionnement relatif du bouton : En appliquant position: relative au bouton, nous permettons aux pseudo-éléments :before et :after d’être positionnés par rapport à celui-ci.
  2. Styles de base du bouton : Le bouton a des styles de base comme padding, font-size, color, et background-color pour le rendre attrayant.
  3. Création des pseudo-éléments :before et :after :
    • content: '' : Nécessaire pour générer les pseudo-éléments.
    • position: absolute : Permet de positionner les pseudo-éléments par rapport à leur parent (le bouton).
    • width: 200% et height: 200% : Fait en sorte que les pseudo-éléments soient plus grands que le bouton pour créer un effet de débordement.
    • top: 50%, left: 50%, transform: translate(-50%, -50%) scale(0) : Centre les pseudo-éléments et les réduit à une échelle de 0 pour les cacher initialement.
    • background-color: rgba(255, 255, 255, 0.2) : Applique une couleur de fond semi-transparente pour l’effet visuel.
    • transition: transform 0.3s ease : Ajoute une transition pour l’effet de survol.
    • border-radius: 50% : Donne une forme circulaire aux pseudo-éléments.
  4. Effet de survol :
    • Lors du survol, les pseudo-éléments passent de scale(0) à scale(1), créant ainsi un effet d’onde autour du bouton.
    • Le bouton change de couleur de fond et de texte pour accentuer l’effet de survol.

Rendu

Exemple 5 : Créer des séparateurs de section

Dans cet exemple, nous allons utiliser les pseudo-éléments :before et :after pour créer des séparateurs de section élégants.

Les séparateurs de section peuvent aider à structurer visuellement votre contenu et à le rendre plus agréable à lire.

HTML

Commençons par notre structure HTML de base. Nous avons deux sections de contenu que nous souhaitons séparer visuellement :

  <section class="content-section">
    <h2>Première section</h2>
  </section>
  <div class="separator"></div>
  <section class="content-section">
    <h2>Deuxième section</h2>
  </section>

CSS

Maintenant, ajoutons le CSS pour créer les séparateurs de section avec les pseudo-éléments :before et :after.

  .content-section {
      padding: 20px;
      border: 1px solid #ddd;
      margin-bottom: 40px;
  }

  .separator {
      position: relative;
      height: 20px;
      margin: 40px 0; /* Espace autour du séparateur */
  }

  .separator::before,
  .separator::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 50%;
      height: 2px;
      background-color: #007BFF;
  }

  .separator::before {
      left: 0;
  }

  .separator::after {
      right: 0;
  }

Explications

  1. Styles de base des sections : Les sections de contenu ont des marges, des paddings et des bordures définis pour les séparer visuellement du reste de la page.
  2. Création du séparateur :
    • position: relative : Permet de positionner les pseudo-éléments par rapport au séparateur.
    • height: 20px : Donne une hauteur au conteneur du séparateur, même s’il est essentiellement vide.
    • margin: 40px 0 : Crée de l’espace autour du séparateur pour le rendre plus visible.
  3. Création des pseudo-éléments :before et :after :
    • content: '' : Nécessaire pour générer les pseudo-éléments.
    • position: absolute : Permet de positionner les pseudo-éléments par rapport au conteneur du séparateur.
    • top: 50% : Centre les lignes verticalement dans le conteneur.
    • width: 50% et height: 2px : Donne à chaque ligne une largeur de 50% du conteneur et une hauteur de 2 pixels.
    • background-color: #007BFF : Applique une couleur bleue aux lignes pour les rendre visibles.
  4. Positionnement des lignes :
    • Le pseudo-élément ::before est aligné à gauche avec left: 0.
    • Le pseudo-élément ::after est aligné à droite avec right: 0.

Rendu

Première section

Deuxième section

Les cas d’utilisations les plus connus pour les pseudo-éléments :before et :after

Les pseudo-éléments :before et :after sont extrêmement polyvalents et peuvent être utilisés dans une variété de contextes pour améliorer l’apparence et la fonctionnalité de votre site web.

Voici quelques-uns des cas d’utilisation les plus courants :

  • Ajout de contenu décoratif : Utilisez :before et :after pour ajouter des éléments graphiques ou du texte sans modifier le HTML. Cela peut inclure des icônes, des étoiles, ou d’autres symboles avant ou après le contenu principal.
  • Création de guillemets et de citations stylisées : Ajoutez des guillemets décoratifs autour des citations pour améliorer la présentation des textes cités.
  • Ajout de bordures et d’arrière-plans stylisés : Utilisez des pseudo-éléments pour ajouter des bordures ou des arrière-plans personnalisés à des éléments, comme des cartes ou des sections de contenu, pour créer des effets visuels attrayants.
  • Création de boutons et de liens stylisés : Ajoutez des effets visuels aux boutons et aux liens, tels que des surbrillances ou des animations, pour améliorer l’interactivité et l’attrait visuel.
  • Surlignage et mise en évidence de texte : Utilisez :before et :after pour ajouter des surlignages ou des encadrements autour du texte afin de mettre en évidence des informations importantes.
  • Ajout d’icônes aux listes et aux éléments de menu : Ajoutez des icônes décoratives avant les éléments de liste ou de menu pour améliorer la navigation et la présentation.
  • Effets de transition et d’animation : Créez des effets de transition et d’animation pour rendre les interactions utilisateur plus fluides et engageantes. Cela peut inclure des effets de survol, des apparitions progressives, ou des transformations dynamiques.
  • Indicateurs de formulaire et de validation : Utilisez des pseudo-éléments pour ajouter des indicateurs de validation ou des messages d’erreur aux champs de formulaire, améliorant ainsi l’expérience utilisateur.
  • Création de motifs et de textures : Utilisez des pseudo-éléments pour ajouter des motifs répétitifs ou des textures de fond, enrichissant ainsi le design visuel de votre site.
  • Amélioration de la typographie : Ajoutez des éléments typographiques supplémentaires, tels que des lignes décoratives ou des effets d’ombrage, pour améliorer l’esthétique du texte.

Ces utilisations montrent à quel point les pseudo-éléments :before et :after sont flexibles et puissants. En exploitant ces techniques, vous pouvez créer des designs web plus riches, interactifs et visuellement attrayants sans alourdir votre HTML.

Comment retrouver le code CSS de :before et :after dans l’outil de développement de Google

L’outil de développement de Google Chrome, souvent appelé DevTools, est un outil puissant pour les développeurs web.

Il permet de visualiser et de modifier en temps réel le code HTML et CSS de votre site. Retrouver et inspecter les pseudo-éléments :before et :after peut être particulièrement utile pour comprendre comment ils sont appliqués et pour déboguer des problèmes de style.

Voici un guide étape par étape pour retrouver le code CSS de :before et :after dans DevTools.

Étape 1 : Ouvrir DevTools

Ouvrez votre navigateur Google Chrome et allez à la page web que vous souhaitez inspecter.

Ensuite vous pouvez ouvrir DevTools de plusieurs façons :

  • Faites un clic droit sur la page et sélectionnez « Inspecter ».
  • Utilisez le raccourci clavier Ctrl+Shift+I (Windows/Linux) ou Cmd+Option+I (Mac).
  • Cliquez sur les trois points verticaux dans le coin supérieur droit du navigateur, allez dans « Plus d’outils », puis sélectionnez « Outils de développement ».

Étape 2 : Sélectionner l’élément à inspecter

Dans DevTools, cliquez sur l’icône en forme de flèche en haut à gauche pour activer l’outil de sélection d’éléments (raccourci : Ctrl+Shift+C ou Cmd+Shift+C).

Déplacez votre souris sur l’élément HTML que vous souhaitez inspecter et cliquez dessus. DevTools affichera alors le code HTML de cet élément dans le panneau « Éléments ».

Étape 3 : Inspecter les pseudo-éléments

Dans le panneau « Éléments », cherchez l’élément HTML que vous avez sélectionné. Juste en dessous, vous verrez des entrées pour ::before et ::after si ces pseudo-éléments sont définis pour cet élément.

Cliquez sur l’entrée ::before ou ::after pour voir le code CSS associé. Vous verrez les styles appliqués aux pseudo-éléments, y compris les propriétés comme content, position, background, etc.

Étape 4 : Modifier les styles en temps réel

Vous pouvez cliquer sur n’importe quelle propriété CSS pour la modifier et voir immédiatement le résultat sur la page. Cela est particulièrement utile pour ajuster les styles et tester des modifications sans avoir à recharger la page.

Vous pouvez également ajouter de nouvelles propriétés CSS en cliquant sur une ligne vide dans le panneau des styles et en tapant la nouvelle règle.

Étape 5 : Enregistrer vos modifications

Une fois que vous êtes satisfait des modifications, vous pouvez copier les nouvelles règles CSS et les coller dans votre fichier CSS pour les rendre permanentes. DevTools ne sauvegarde pas les modifications sur le serveur, donc vous devez les enregistrer manuellement dans vos fichiers de projet.

Utilisation avancée

Utilisez la fonction de recherche (Ctrl+F ou Cmd+F) dans DevTools pour trouver rapidement des règles CSS spécifiques dans le panneau des styles.

Utilisez les autres fonctionnalités de DevTools, comme le panneau « Performance » ou « Lighthouse », pour analyser comment vos pseudo-éléments impactent le temps de chargement et les performances globales de votre site.

En suivant ces étapes, vous pouvez facilement retrouver et modifier les styles des pseudo-éléments :before et :after dans DevTools, vous donnant ainsi un contrôle total sur l’apparence et le comportement de votre site web.

Devtools de Google sur l'article CSS : Pseudo-éléments :Before et :After

Compatibilité des navigateurs concernant :before et :after

Les pseudo-éléments :before et :after sont largement supportés par tous les navigateurs modernes, y compris Google Chrome, Mozilla Firefox, Safari, Microsoft Edge et Opera. Cependant, pour garantir une compatibilité optimale, il est important de suivre certaines bonnes pratiques.

Même si :before et :after sont bien pris en charge, il est toujours bon de vérifier le rendu de ces pseudo-éléments sur plusieurs navigateurs et versions. Utiliser des outils comme BrowserStack ou Sauce Labs peut vous aider à tester votre site sur différentes plateformes pour identifier et corriger les éventuels problèmes de compatibilité.

Utilisez des validateurs CSS pour vous assurer que votre code est correct et respecte les normes. Des erreurs dans votre CSS peuvent parfois affecter le rendu des pseudo-éléments.

Effectuez des tests manuels en ouvrant votre site dans les principaux navigateurs pour vérifier que les pseudo-éléments s’affichent correctement. Assurez-vous également de tester sur différents appareils, comme les smartphones et les tablettes, pour une compatibilité mobile.

En suivant ces pratiques, vous pouvez vous assurer que vos pseudo-éléments :before et :after s’affichent correctement sur tous les navigateurs, offrant une expérience utilisateur cohérente et optimale.

Maintenant, vous connaissez tout sur les pseudo-éléments CSS :before et :after. Il ne vous reste plus qu’à mettre en application ces techniques pour enrichir vos designs web.

Que ce soit pour surligner des titres, ajouter des icônes, obscurcir des images, créer des effets de survol ou des séparateurs de section, ces outils vous permettront d’améliorer l’esthétique et l’interactivité de vos pages.

À vous de jouer pour transformer vos projets de développement web !

Mes autres articles

Infographie de l'article "espace insécable html"

Espace insécable en html

Aujourd’hui, nous allons explorer un sujet simple mais crucial en HTML : l’espace insécable. Que vous soyez débutant ou expert, comprendre comment utiliser les espaces...

Infographie de l'article "Fil d'Arianne WordPress"

Fil d’Ariane WordPress

Vous vous êtes sûrement demandé comment ajouter un fil d’Ariane sur votre site WordPress, n’est-ce pas ? Je vais vous guider pas à pas pour...

Infographie de l'article pourquoi choisir WordPress représentant une personne en pleine réflexion devant son ordinateur

Pourquoi choisir WordPress ?

Découvrez les avantages de choisir WordPress pour votre site web. Je vous explique pourquoi WordPress est leader sur le marché !...