Les pseudo-éléments ::before
et ::after
.
Résumé des caractéristiques du sélecteur ::before
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.
::before
::after
::before
et ::after
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.
file
.