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 » ?
- Exemple 1 : Surligner un titre avec :after
- Exemple 2 : Créer des icônes avec des pseudo-éléments
- Exemple 3 : Obscurcir une image avec un fond sombre en utilisant :before
- Exemple 4 : Créer des effets de survol
- Exemple 5 : Créer des séparateurs de section
- Les cas d’utilisations les plus connus pour les pseudo-éléments :before et :after
- Comment retrouver le code CSS de :before et :after dans l’outil de développement de Google
- Compatibilité des navigateurs concernant :before et :after
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 et les webmaster WordPress.
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 :
:beforeajoute du contenu avant l’élément ciblé.:afterajoute 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, comme des espaces insécables en HTML.
Pourquoi utiliser les pseudo-éléments ?
L’utilisation de :before et :after présente plusieurs avantages :
- 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.
- 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.
- 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
- Positionnement relatif du titre : Nous appliquons
position: relativeà l’élément<h2>pour que le pseudo-élément:aftersoit positionné par rapport à ce titre. - 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: 0etbottom: -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%etheight: 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.
Par exemple, vous pouvez combiner cette approche avec l’utilisation d’ancres dans WordPress pour créer des menus encore plus dynamiques et navigables.
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
- 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. - Positionnement des éléments de menu : En ajoutant
position: relativeaux éléments de menu, nous permettons au pseudo-élément:beforede se positionner par rapport à chaque élément de menu. - 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. - 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: 0ettop: 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
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
- Positionnement relatif du conteneur d’image : En appliquant
position: relativeà l’élément<div>contenant l’image, nous permettons au pseudo-élément:befored’être positionné par rapport à ce conteneur. - Affichage de l’image : Nous veillons à ce que l’image occupe la totalité de la largeur du conteneur avec
display: blocketwidth: 100%. - 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.
- Positionnement du texte superposé : Nous utilisons
position: absoluteet des transformations pour centrer le texte au milieu du conteneur. Lez-index: 2place le texte au-dessus du pseudo-élément:before.
Rendu
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
- Positionnement relatif du bouton : En appliquant
position: relativeau bouton, nous permettons aux pseudo-éléments:beforeet:afterd’être positionnés par rapport à celui-ci. - Styles de base du bouton : Le bouton a des styles de base comme
padding,font-size,color, etbackground-colorpour le rendre attrayant. - Création des pseudo-éléments
:beforeet: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%etheight: 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.
- 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.
- Lors du survol, les pseudo-éléments passent de
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
- 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.
- 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.
- Création des pseudo-éléments
:beforeet: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%etheight: 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.
- Positionnement des lignes :
- Le pseudo-élément
::beforeest aligné à gauche avecleft: 0. - Le pseudo-élément
::afterest aligné à droite avecright: 0.
- Le pseudo-élément
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
:beforeet:afterpour 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
:beforeet:afterpour 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
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) ouCmd+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.
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 !
