CSS
Pseudo-éléments
Recherche…
Introduction
Les pseudo-éléments, tout comme les pseudo-classes, sont ajoutés à un sélecteur CSS, mais au lieu de décrire un état spécial, ils vous permettent d'étendre et de styliser certaines parties d'un élément HTML.
Par exemple, le pseudo-élément :: first-letter ne cible que la première lettre d'un élément de bloc spécifié par le sélecteur.
Syntaxe
- selector :: pseudo-element {property: value}
Paramètres
pseudo-élément | La description |
---|---|
::after | Insérer du contenu après le contenu d'un élément |
::before | Insérer du contenu avant le contenu d'un élément |
::first-letter | Sélectionne la première lettre de chaque élément |
::first-line | Sélectionne la première ligne de chaque élément |
::selection | Correspond à la partie d'un élément sélectionnée par un utilisateur |
::backdrop | Utilisé pour créer une toile de fond qui masque le document sous-jacent pour un élément de la pile de la couche supérieure |
::placeholder | Vous permet de styliser le texte d'espace réservé d'un élément de formulaire (expérimental) |
::marker | Pour appliquer des attributs de style liste sur un élément donné (expérimental) |
::spelling-error | Représente un segment de texte signalé incorrectement par le navigateur (Expérimental) |
::grammar-error | Représente un segment de texte que le navigateur a identifié comme grammaticalement incorrect (Expérimental) |
Remarques
Parfois , vous verrez doubles points (
::
) au lieu d'un seul (:
). Ceci est un moyen de séparer les pseudo-classes de pseudo-éléments, mais certains anciens navigateurs comme Internet Explorer 8 ne supporte que deux points simple (:
) pour les pseudo-éléments.On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Il doit apparaître après les sélecteurs simples dans la déclaration.
Les pseudo-éléments ne font pas partie du DOM et ne peuvent donc pas être ciblés par
:hover
ou d'autres événements utilisateur.
Pseudo-éléments
Les pseudo-éléments sont ajoutés aux sélecteurs mais, au lieu de décrire un état spécial, ils vous permettent de styliser certaines parties d'un document.
L'attribut content
est requis pour les pseudo-éléments à rendre; Cependant, l'attribut peut avoir une valeur vide (par exemple, content: ""
).
div::after {
content: 'after';
color: red;
border: 1px solid red;
}
div {
color: black;
border: 1px solid black;
padding: 1px;
}
div::before {
content: 'before';
color: green;
border: 1px solid green;
}
Pseudo-éléments dans les listes
Les pseudo-éléments sont souvent utilisés pour modifier l'apparence des listes (principalement pour les listes non ordonnées, ul
).
La première étape consiste à supprimer les puces de liste par défaut:
ul {
list-style-type: none;
}
Ensuite, vous ajoutez le style personnalisé. Dans cet exemple, nous allons créer des boîtes de dégradés pour les puces.
li:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 10px;
width: 10px;
background: linear-gradient(red, blue);
}
HTML
<ul>
<li>Test I</li>
<li>Test II</li>
</ul>
Résultat