6.1 Propriété content
Les pseudoelements ::before et ::after permettent d'ajouter du contenu avant et après le contenu d'un élément, sans modifier le code HTML.
Ils sont très utilisés à des fins décoratives, pour améliorer l'interface utilisateur et créer des pages web plus interactives.
Qu'est-ce que les pseudoelements ::before et ::after?
Les pseudoelements ::before et ::after créent des éléments virtuels qui s'insèrent respectivement avant et après
le contenu de l'élément sélectionné. Ces pseudoelements sont souvent utilisés pour ajouter des icônes, des éléments décoratifs, ou d'autres effets visuels.
Syntaxe before:
sélecteur::before {
content: "texte ou autres valeurs";
/* styles */
}
Syntaxe after:
sélecteur::after {
content: "texte ou autres valeurs";
/* styles */
}
Propriété content
La propriété clé pour les pseudoelements ::before et ::after est content. Cette propriété définit le contenu
du pseudoelement. Il peut s'agir d'une chaîne de texte, d'une image, ou même d'une valeur vide, si seul un effet visuel est nécessaire.
Valeurs possibles de la propriété content:
- Texte:
"texte" - Image:
url("path/to/image.png") - Valeur vide:
"" - Attributs:
attr(nomAttribut) - Compteurs:
counter(nom)
6.2 Exemples d'utilisation de ::before et ::after
Ajouter des éléments décoratifs
Exemple 1: Ajouter une icône avant le texte
Dans cet exemple, le pseudoelement ::before est utilisé pour ajouter une icône avant le texte d'un lien.
margin-right ajoute de l'espace entre l'icône et le texte:
/* Ajouter une icône avant le texte d'un lien */
a::before {
content: "🔗";
margin-right: 5px;
}
Exemple 2: Ajouter un élément décoratif après un paragraphe
Dans cet exemple, le pseudoelement ::after ajoute un élément décoratif après un paragraphe. display: block et
text-align: right sont utilisés pour aligner l'élément à droite:
/* Ajouter un élément décoratif après un paragraphe */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
Créer des bordures et arrière-plans décoratifs
Exemple 3: Bordure décorative autour d'un élément
Dans cet exemple, le pseudoelement ::before est utilisé pour créer une bande décorative au-dessus de l'élément
div. position: absolute et top: -10px permettent de positionner la bande au-dessus de l'élément:
/* Bordure décorative autour d'un élément */
div::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
Exemple 4: Ajout automatique de guillemets
Dans cet exemple, les pseudoelements ::before et ::after sont utilisés pour ajouter des guillemets autour d'un bloc de citation:
/* Ajout automatique de guillemets autour d'une citation */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
Exemple 5: Numérotation des titres
Dans cet exemple, le pseudoelement ::before est utilisé pour ajouter un numéro devant un titre h2.
counter-increment augmente la valeur du compteur, et content: counter(section) insère la valeur actuelle du compteur:
/* Numérotation des titres */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
6.3 Application et stylisation des pseudoelements
Stylisation des pseudoelements
Les pseudoelements peuvent être stylisés de la même manière que n'importe quel autre élément. Ils supportent la plupart des propriétés CSS, incluant couleur, fond, bordures, dimensions et positionnement.
Utilisation des pseudoelements pour créer des mises en page complexes
Les pseudoelements sont souvent utilisés pour créer des éléments décoratifs dans les mises en page, comme les bordures, ombres et autres effets visuels, sans avoir besoin d'ajouter des éléments HTML supplémentaires.
Exemple: chaque élément de liste aura un marqueur bleu avant le texte:
ul li::before {
content: "•";
color: blue;
margin-right: 5px;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
6.4 Exemple de réalisation complète
/* Ajouter une icône avant le texte d'un lien */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Ajouter un élément décoratif après un paragraphe */
p::after {
content: "❦";
display: block;
text-align: right;
color: red;
}
/* Bordure décorative autour d'un élément */
.decorative-box {
position: relative;
}
.decorative-box::before {
content: "";
display: block;
width: 100%;
height: 10px;
background-color: #3498db;
position: absolute;
top: -10px;
left: 0;
}
/* Ajout automatique de guillemets autour d'une citation */
blockquote::before {
content: "“";
font-size: 2em;
color: #ccc;
}
blockquote::after {
content: "”";
font-size: 2em;
color: #ccc;
}
/* Numérotation des titres */
h2::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de pseudoelements ::before et ::after</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Lien avec icône</a>
<p>Paragraphe avec élément décoratif après le texte</p>
<div class="decorative-box">Élément avec bordure décorative</div>
<blockquote>Citation avec guillemets automatiques</blockquote>
<h2>Titre avec numérotation</h2>
<h2>Un autre titre</h2>
</body>
</html>
GO TO FULL VERSION