Objectif
- Connaitre les sélecteurs en CSS
Introduction
- Les pseudo-éléments sont préfixés par deux points (:) et ajoutés au sélecteur. Les pseudo-éléments accèdent à certaines parties de l'élément pour les styler.
- Les pseudo-éléments en CSS sont des sélecteurs spéciaux qui vous permettent de cibler des parties spécifiques d'un élément HTML et d'appliquer des styles à ces parties.
- Ils sont représentés par deux points (
::) et sont utilisés pour créer des effets visuels et des mises en forme avancées sans avoir à modifier la structure HTML. - Dans ce cours, nous allons explorer les pseudo-éléments les plus couramment utilisés en CSS :
::beforeet::after. Nous allons également inclure des exercices pour vous aider à pratiquer.
Les pseudo-éléments
::beforeet::after- Les pseudo-éléments
::beforeet::afterpermettent d'insérer du contenu généré avant ou après le contenu d'un élément HTML, respectivement. - Ils sont souvent utilisés pour ajouter des décorations, des icônes, des balises de texte supplémentaires, etc.
Syntaxe générale pour les utiliser
selector::before { /* Propriétés CSS ici */ content: "Contenu généré"; } selector::after { /* Propriétés CSS ici */ content: "Contenu généré"; }Exemple 1 : Utilisation de
::before- Supposons que vous ayez un élément div avec la classe
.citation, et vous souhaitez ajouter des guillemets avant et après le texte à l'intérieur de cet élément. Vous pouvez utiliser le pseudo-élément ::before pour cela :.citation::before { content: "« "; color: #888; /* Couleur des guillemets */ font-size: 1.2em; /* Taille de police */ }
- Supposons que vous ayez un élément div avec la classe
Exemple 2 : Utilisation de
::after- Prenons un autre exemple où vous avez une liste non ordonnée <ul> et vous voulez ajouter des puces personnalisées avant chaque élément de liste. Vous pouvez utiliser le pseudo-élément
::beforede cette manière :ul li::before { content: "• "; color: #f00; /* Couleur de la puce */ margin-right: 5px; /* Espacement entre la puce et le texte */ }
- Prenons un autre exemple où vous avez une liste non ordonnée <ul> et vous voulez ajouter des puces personnalisées avant chaque élément de liste. Vous pouvez utiliser le pseudo-élément
- Les pseudo-éléments
Exercice d'application
- Soit la page html suivante:
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="pseudos-elements.css"> <title>Exercices CSS avec Pseudo-Éléments</title> </head> <body> <h1>Mes Exercices CSS avec Pseudo-Éléments</h1> <h2>Exercice 1 : Liste avec des flèches</h2> <ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li> </ul> <h2>Exercice 2 : Bouton avec une icône de cœur</h2> <button class="bouton">Cliquez-moi</button> <h2>Exercice 3 : Boîte d'alerte avec icône d'avertissement</h2> <div class="alerte"> Ceci est un message d'alerte important. </div> <h2>Exercice 4 : Champ de recherche avec une icône de loupe</h2> <form> <div class="input-container"> <input type="text" placeholder="Rechercher..."> <span class="input-icon"></span> </div> </form> <p>Fin de mes exercices.</p> </body> </html> - Créez une liste non ordonnée HTML et utilisez un pseudo-élément ::before pour ajouter des icônes de flèche avant chaque élément de la liste.
- Créez un bouton HTML avec la classe .bouton et utilisez un pseudo-élément ::before pour ajouter une icône de cœur à l'intérieur du bouton.
- Concevez une boîte d'alerte (comme une boîte d'alerte Bootstrap) en utilisant des pseudo-éléments pour ajouter une icône d'avertissement et un arrière-plan coloré à la boîte.
- Créez un élément de formulaire <input> et utilisez un pseudo-élément ::after pour afficher une icône de loupe à la fin de l'input.
Solution
/* Exercice 1 : Ajouter des flèches à une liste non ordonnée */ ul { list-style: none; } li::before { content: "➔ "; /* Insérer une flèche */ margin-right: 5px; /* Espacement entre la flèche et le texte */ } /* Exercice 2 : Ajouter une icône de cœur à un bouton */ .bouton::before { content: "❤️ "; /* Insérer une icône de cœur */ margin-right: 5px; /* Espacement entre l'icône et le texte du bouton */ } /* Exercice 3 : Concevoir une boîte d'alerte */ .alerte { background-color: #ffc107; /* Couleur de fond de la boîte */ padding: 10px; /* Espace intérieur de la boîte */ position: relative; /* Pour positionner l'icône */ } .alerte::before { content: "\26A0"; /* Insérer l'icône d'avertissement (point d'exclamation) */ font-size: 24px; /* Taille de l'icône */ color: #f00; /* Couleur de l'icône */ margin-right: 5px; /* Espacement entre l'icône et le texte */ position:relative; left: 0; /* Position à gauche de la boîte (0 signifie que l'icône sera tout à gauche) */ top: 50%; /* Alignement vertical au milieu */ transform: translateY(-50%); /* Ajuster verticalement au milieu */ } /* Exercice 4 : Ajouter une icône de loupe à un input */ .input-container { position: relative; margin: 10px; } input[type="text"] { padding-left: 30px; /* Espace pour l'icône */ } .input-icon::before { content: "?"; /* Insérer une icône de loupe */ position: absolute; left: 5px; /* Position de l'icône à gauche */ top: 50%; /* Alignement vertical au milieu */ transform: translateY(-50%); /* Ajuster verticalement au milieu */ }- Soit la page html suivante:
Ressource PDF disponible
Ce cours contient une version PDF téléchargeable. Le lien sera disponible prochainement.