Les contenus des pseudos classes :before et :after


La base

On peut donner des éléments à coté gauche et droite (ou avant et après) d'un autre élément, par exemple une espace vide (blank) avant le texte, une flèche après le texte ou des guillemets avant et après du texte, mais aussi une symbole de copyright ou une symbole monétaire après un champs de formulaire, etc. Il faut déclarer les sélecteurs en attachant les pseudos éléments/classes :before (ça veut dire "avant") et :after (ça veut dire "après") comme p:before , div:after, etc., et avec la propriété content et sa valeur qui doit être mise entre des guillemets (content : "").

 
 
 

Espace vide

Si on veut rajouter une espace blanche (vide) avant ou après un élément, par exemple notre texte doit commencer un peu plus intérieur, on peut utiliser la pseudo classe :before avec une valeur en ISO pour CSS (ou unicode, qui viennent des codes ASCII hex) :

p:before {
    content: "\00a0";
}

Pour rajouter plusieurs espaces, il faut répéter le code entre les guillemets :

p:before {
    content: "\00a0\00a0\00a0";
}

 

ISO codes pour CSS

Vous trouvez les codes de symboles et caractères spéciaux dans les tableaux de :

Si vous connaissez la valeur en ASCII décimal ou vous avez le caractère, utilisez le convertisseur de Evotech à ASCII hex.

Si vous ne trouvez pas le caractère/forme souhaité, avec un logiciel marrant vous pouvez le dessiner, puis le dessin va être "traduit" en unicode. Sur le site de ShapeCatcher :

Source et explication en anglais : sur StackOverflow.

Les commentaires sont fermés.