Les pseudo-éléments ::after
et ::before
permettent d’ajouter du contenu directement après ou directement avant un élément.
La propriété content
...
Les pseudo-éléments doivent être utilisés avec la propriété content
. Cette propriété permet de spécifier le contenu qui est inséré. Dans cet exemple, le texte "Titre :" sera ajouté avant chaque titre de niveau 1.
h1::before{ content:"Titre:"; }
Il est également possible d’ajouter à un élément la valeur d’un de ses attributs, ici on ajoute la valeur de l’attribut title
après l’élément <a>
.
a::after{ content:attr(title); }
#1par farenheit, le 5 novembre 2012
Hey merci !c’est cool comme site ! Continue à lâcher des infos, viendrai souvent.
#2par jp, le 3 février 2013
Alors finalement, il faut utiliser une fois : ou 2 fois :: ...
#3par css3create, le 3 février 2013
@jp : Il faut utiliser
::
, mais prévoir la dégradation gracieuse avec:
! :D#4par Nouniz, le 23 décembre 2013
Peut-on utiliser ceci sur un élément last-child ?
exemple :
element ::last-child ::before ??
j’ai testé plusieurs fois, ça a l’air de NE PAS fonctionner
#5par css3create, le 15 janvier 2014
@Nouniz : Oui cela fonctionne, de cette façon :
element:last-child::before { ... }