Sites


CSS3

Ajouter automatiquement du texte

Ajouter un texte avant ou après

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.

Ajouter automatiquement des guillemets français

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.