La propriété content
en CSS permet de composer du texte via le langage CSS. Cette propriété est assez bien supportée par les navigateurs actuels car même Internet Explorer 8 est en mesure de la comprendre.
Seulement voilà, on peut parfois se retrouver bien embêté à l’utilisation de content
car certains caractères, liés à la ponctuation, ne sont pas correctement encodés dans les feuilles de style. Il faut en réalité utiliser la valeur Unicode de ces caractères si l’on souhaite les voir s’afficher avec les sélecteurs :before
et :after
.
Les valeurs Unicode ont pour particularité de toujours commencer par un antislash. Ci-dessous un tableau non exhaustif des caractères liés à la typographie et la ponctuation et leur équivalence en langage HTML, ASCII et Unicode.
Sym. | HTML | ASCII | Description | CSS content |
---|---|---|---|---|
" | " | " | Guillemet double | \0022 |
& | & | & | Esperluette | \0026 |
< | < | < | Signe inférieur | \003c |
> | > | > | Signe supérieur | \003e |
|   | Espace insécable | \00a0 | |
« | « | « | Guillemet gauche | \00ab |
» | » | » | Guillemet droit | \00bb |
  |   | Espace demi-cadratin | \2002 | |
  |   | Espace cadratin | \2003 | |
  |   | Espace maigre | \2009 | |
| ‌ | ‌ | Antiliant sans chasse | \200C |
| ‍ | ‍ | Liant sans chasse | \200D |
| ‎ | ‎ | Marque gauche-à-droite | \200E |
| ‏ | ‏ | Marque droite-à-gauche | \200F |
– | – | – | Tiret demi-cadratin | \2013 |
— | — | — | Tiret cadratin | \2014 |
‘ | ‘ | ‘ | Guillemet-apostrophe culbuté | \2018 |
’ | ’ | ’ | Guillemet-apostrophe | \2019 |
‚ | ‚ | ‚ | Guillemet-virgule inférieur | \201A |
“ | “ | “ | Guillemet-apostrophe double culbuté | \201C |
” | ” | ” | Guillemet-apostrophe double | \201D |
„ | „ | „ | Guillemet-virgule double inférieur | \201E |
‟ | ‟ | Guillemet-virgule double supérieur culbuté | \201F | |
† | † | † | Obèle | \2020 |
‡ | ‡ | ‡ | Double obèle | \2021 |
• | • | • | Gros point médian | \2022 |
… | … | … | Points de suspension | \2026 |
‰ | ‰ | ‰ | Pour mille | \2030 |
′ | ′ | ′ | Prime | \2032 | ″ | ″ | ″ | Double prime | \2033 |
‹ | ‹ | ‹ | Guillemet simple vers la gauche | \2039 |
› | › | › | Guillemet simple vers la droite | \203A |