Nous avons déjà vu les pseudo-éléments ::before et ::after. Nous nous permettons de les rappeler ici.
p.special::before {content: "Special! "}
La propriété content permet d'ajouter du contenu. On l'utilisera en général avec les pseudos-elements ::before et ::after.
Le système vu précédemment peut aussi être utilisé dans le cas de citation, pour lequel on pourra ajouter automatiquement les guillemets qui correspondent à la langue souhaitée.
Il faudra s'y prendre en deux temps, définir le type de guillemet et définir le contexte d'application.
la propriété quote, permet de spécifier les caractères qui vont servir de guillemet. Tous les caractères sont accessibles, y compris les *, $, % ou autres caractères particuliers, même si on se contentera souvent des « et » (altGr w ou altGr x).
Pour remplacer automatiquement tout " par des français :
q:lang(fr) {
font-style:italic;
quotes: "«" "»";
}
<p><q lang="fr">Bonjour, et bienvenu</q>, dit l'homme à l'entrée.</p>
va donner:
Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.
Vous devriez rafraîchir la page.