Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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)

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="remarque".

 

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. Il reste cependant quelques soucis en ce qui concerne l'application d'animations ou de transitions sur ces pseudo-éléments.

1
::before
::after
2
Animations et transitions sur ::before et ::after
Estimation de la prise en charge en pourcentage du parc actuel.
100%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que ::before.

Les spécifications CSS éditées par le W3C sont organisées en modules. ::before fait partie du Module CSS - Pseudo-éléments (CSS Pseudo-Elements Module ). Les définitions suivantes sont également décrites dans ce même module.

Sélecteurs.

Pseudo-élément désignant l'emplacement situé juste après un élément.
Désigne le bouton dans une zone de saisie du type file.
Pseudo-élément désignant la première lettre du texte.
Pseudo-élément désignant la première ligne du texte.
Pseudo-élément correspondant aux textes comportant des fautes de grammaire.
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
Pseudo-élément désignant le texte d'information dans une zone de saisie.
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
Sélectionne le texte de l'élément désigné par le signet de l'url.