Les pseudo-éléments en CSS
Les pseudo-éléments en CSS
-
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
-
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 : -
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 : -
Exercice d’application
- Soit la page html suivante:
- 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.
selector::before {
/* Propriétés CSS ici */
content: "Contenu généré";
}
selector::after {
/* Propriétés CSS ici */
content: "Contenu généré";
}.citation::before {
content: "« ";
color: #888; /* Couleur des guillemets */
font-size: 1.2em; /* Taille de police */
}ul li::before {
content: "• ";
color: #f00; /* Couleur de la puce */
margin-right: 5px; /* Espacement entre la puce et le texte */
}<!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>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 */
}
