CSS => Pseudo-éléments

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

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS
Pseudo-éléments

Recherche…