Les pseudo-éléments CSS c'est quoi ?
Contrairement à la pseudo-classe qui cible un élément existant réellement dans le document, le pseudo-élément permet, quant à lui, de cibler des éléments indépendants du DOM.
Pseudo-éléments ::before et ::after
Les pseudo-éléments ::before et ::after permettent de générer du contenu à l’intérieur d'un élément, respectivement avant et après son contenu.
Indissociable de ces deux pseudo-éléments, la propriété content peut contenir des valeurs, des images, du texte...
Exemples :
Exemple avec les pseudo-éléments ::before et ::after (ils sont souvent utilisés ensemble, mais peuvent l'être bien entendu séparément) :
.class:before{
content: '✔️'
}
.class:after{
content: '❌'
}
Au lieu de symboles, vous pouvez aussi insérer du texte :
<div>Je suis </div>
div:after{
color: #7A5FFF;
content: '< développeur />'
}
Toutefois, gardez bien en tête que vous ne pouvez pas sélectionner le contenu de ces pseudo-éléments.
Il s'agit là d'exemples très basiques. Vous trouverez ici de nombreuses utilisations de ces pseudo-éléments.
💡 NB : Les pseudo-éléments ::after et ::before peuvent aussi s'écrire avec un seul double-point (dans la spécification CSS niveau 2).
Pseudo-élément ::backdrop
Utilisé conjointement avec l'élément HTML5 dialog, le pseudo-élément ::backdrop agit comme un overlay (couche) d'une boîte que l'élément en plein écran affiche derrière lui, mais en même temps il se trouve au-dessus de tout autre contenu.
A l'heure actuelle, la compatibilité étant très pauvre, vous devrez utiliser un polyfill.
Complément d'infos(EN) sur le pseudo-élément ::backdrop.
Pseudo-élément ::cue
Le pseudo-élément ::cue, qui fait partie de la spécification WebVTT, permet de cibler les indications textuelles WebVTT d'un élément audio ou vidéo. Ce pseudo-élément peut être utilisé afin de mettre en forme les légendes et autres indications textuelles pour les médias avec des pistes VTT.
Imaginons que nous écrivions des sous-titres de couleur blanche sur fond noir pour une vidéo, voici à quoi ressemblerait le code :
video::cue {
color: white;
background: black
}
Assez simple, n'est-il pas ? Cependant, il existe un nombre restreint de propriétés que l'on peut appliquer à ce pseudo-élément :
coloropacityvisibilitytext-decorationtext-shadowbackgroundoutlinefontwhite-spacetext-combine-uprightruby-position(CSS Ruby Layout Module Level 1)
Pseudo-élément ::first-letter
Le pseudo-élément ::first-letter sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.
.class::first-letter{
font-size: 2.5rem;
padding: .25rem .5rem;
margin-right: .25rem;
border: 2px solid;
font-weight: bold;
color: #7A5FFF
}
Pseudo-élément ::first-line
Le pseudo-élément ::first-line permet de cibler la première ligne d'un élément (comme un paragraphe par exemple).
p::first-line{
color: #7A5FFF
}
Pseudo-élément ::grammar-error
Le pseudo-élément ::grammar-error va permettre de mettre en forme, à l'aide de certaines propriétés, une partie de texte que le navigateur considère comme grammaticalement incorrecte. Ce pseudo-élément fait partie du module CSS Pseudo-Elements de niveau quatre qui est en version de travail. A l'heure actuelle, aucun navigateur ne supporte ce pseudo-élément.
Pseudo-élément ::marker
C'est le marqueur d'un élément d'une liste. Ce pseudo-élément permet donc de styliser la puce ou le numéro d'une liste. Il n'existe pour l'instant aucun support pour le pseudo-élément ::markeur.
Pseudo-élément ::placeholder
A ne pas confondre avec l'attribut HTML placeholder, le pseudo-élément ::placeholder représente le texte de substitution pour un élément de formulaire de type texte. Il permet de personnaliser l'apparence de ce texte.
::placeholder{
color: #7A5FFF
}
<input placeholder="Rechercher...">
Pseudo-élément ::selection
Le pseudo-élément::selection permet de mettre en forme la sélection d'éléments dans le document, choisis par l'utilisateur via la souris ou un autre dispositif de pointage.
/*NB : préfixe pour Firefox ::-moz-selection*/
::selection{
background-color:purple;
color: white
}
Pseudo-élément ::slotted()
Ce pseudo-élément va permettre de cibler des éléments à l'intérieur d'un élément template. Si vous ne connaissez pas l'élément template, je vous invite à lire l'article sur ce blog concernant les Web components.
Par ailleurs vous trouverez ici un exemple de la mise en application du pseudo-élément :slotted().
Pseudo-élément ::spelling-error
A l'instar du pseudo-élément ::grammar-error, ::spelling-error va permettre de mettre en forme via différentes propriétés une partie de texte que le navigateur considère comme mal orthographié.
Article complet sur les pseudo-éléments.