Les pseudo-éléments ::before et ::after.

::before
::after

Résumé des caractéristiques du sélecteur ::before

Description rapide
Pseudo-élément désignant l'emplacement situé juste avant un élément.
Statut
Standard
Module W3C
Module CSS - Pseudo-éléments
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Description des pseudo-éléments ::before et ::after.

Très différents des autres sélecteurs, les pseudo-éléments ::before et ::after sont capables d'ajouter un élément avant ou après l'élément ciblé. Le contenu de cet élément ajouté est défini par la propriété content.

L'exemple ci-dessous ajoute un élément contenant le texte "-->" aux paragraphes de la classe remarque. L'élément ajouté est du type inline : aucun retour à la ligne n'est ajouté, ni avant, ni après l'élément.

p.remarque::before {content:'--> ';}

Ce premier paragraphe n'est associé à aucune classe.

Ce deuxième paragraphe comporte l'attribut class="note".

 

La propriété content est donc nécessaire pour définir le contenu de l'élément ajouté, mais toutes les autres propriétés peuvent être utilisées pour formater ce nouvel élément. Des animations ou transitions peuvent également être appliquées, bien que la compatibilité des navigateurs soit moins bonne sur ce point.

Ceci est l'élément portant l'ID description2. Il comporte 2 paragraphes.

Deuxième paragraphe.

 

Attention ! Les pseudo-éléments ::before et ::after ne sont opérationnels que s'ils sont appliqués à un élément susceptible d'en contenir d'autres. Ils sont donc sans effet sur un certain nombre de balises comme img, br, input, textarea, etc. ::before et ::after sont également sans effet s'ils sont appliqués à select, car cette balise n'accepte de contenir que des éléments option.

Remarque : le texte des éléments ajoutés avec le pseudo-élément ::before sont pris en compte par les autres pseudo-éléments ::first-letter et ::first-line.

 

On voit que la propriété content est indissociable des pseudo-éléments ::before et ::after. Nous vous recommandons de consulter également la page de la propriété content pour découvrir tout ce qui peut être inséré avant ou après un élément : la valeur d'un compteur, une image, des points de suite, etc.

Exemples d'utilisation de ::before et ::after.

Ajouter un fleuron après chaque paragraphe.

Les éléments insérés par ::before ou ::after sont par défaut du type inline mais il est tout à fait possible de les redéfinir en block afin qu'ils soient précédés et suivis par un saut de ligne. C'est ce qui a été fait dans l'exemple ci-dessous, pour ajouter un fleuron (une décoration) après chacun des paragraphes.

Quisque at dolor nec lorem pellentesque congue id id diam. Vestibulum efficitur suscipit elit et tincidunt. In pharetra malesuada neque a egestas. Nullam id tortor leo. Proin vitae placerat tellus. Duis ultrices dolor at nisi vulputate, non tincidunt metus dictum.

Suspendisse potenti. Aliquam sit amet elit nec sem hendrerit volutpat. Curabitur rhoncus nisi pharetra lorem vehicula, ut consectetur turpis facilisis. Ut pulvinar lobortis dui in consequat. Morbi suscipit rhoncus elit at pharetra.

Donec sed varius mi. Morbi imperdiet elit in scelerisque tincidunt. Donec aliquam erat aliquam sem auctor consequat. Curabitur aliquam sem odio, tincidunt commodo tellus mollis id. Aliquam hendrerit mattis risus, sit amet bibendum mi porttitor vel.

Compatibilité des navigateurs.

La prise en charge des pseudo-éléments ::before et ::after ne pose aucun problème avec les navigateurs actuels, y compris quand il s'agit d'appliquer une animations ou une transitions sur ces pseudo-éléments.

1
Sélecteurs
::before
::after
2
Animations et transitions sur
::before et ::after
Estimation de la prise en charge globale.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Firefox

Opéra

Samsung Internet

Baidu Browser

QQ Browser

UC Browser pour Androïd

Edge

Safari sur IOS

Androïd Brower

Safari

Chrome pour Androïd

Firefox pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique du pseudo-élément ::before.

Autres pseudo-éléments.

Sélecteurs :

::after
Pseudo-élément désignant l'emplacement situé juste après un élément.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::file-selector-button
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
::first-letter
Pseudo-élément désignant la première lettre du paragraphe.
::first-line
Pseudo-élément désignant la première ligne du paragraphe.
⚠
::grammar-error
Des pseudo-élément ciblant les textes comportant des fautes d'orthographe (::spelling-error) ou des fautes de grammaire (::grammar-error).
::highlight()
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
✗
::inactive-selection
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
::marker
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
::placeholder
Pseudo-élément désignant le texte de substitution dans une zone de saisie (attribut placeholder).
⚠
::prefix
Cible les caractères de ponctuation qui peuvent précéder la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères qui la précède.
⚠
::search-text
Cible le texte recherché par l'internaute (zone de recherche CTRL+F du navigateur).
::selection
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
::spelling-error
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
⚠
::suffix
Cible les caractères de ponctuation qui peuvent suivre la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères de ponctuation qui la suivent.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.