Les attributs CSS :after et :before

Ces 2 attributs CSS découverts récemment peuvent être fort utiles; ils permettent d’automatiser certains éléments de présentation. Explication par l’exemple.

Instruction :

@media print{
a[href]:after{
content: ” (” attr(href) “)”;
}
}

Aprés chaque lien, cette instruction écrira l’URL du lien entre parenthèse.

Eg: Vous écrivez dans un post la ligne suivante :
Veuillez utiliser google avant de poser des questions

Et vous aurez à l’affichage :
Veuillez utiliser google (http://www.google.com) avant de poser des questions

Quotes

Une des utilisations des plus communes est l’automatisation de l’ajout de guillemets pour les blocs de citation (balise html <blockquote>). Il existe plusieurs guillemets différents, en voici le tableau avec leur code ISO respectif :

Caractère	Description	Code ISO
“	Citation standard	0022
‘	Quote simple	0027
<	Inférieur	2039
>	Supérieur	203A
«	Double inférieur	00AB
»	Double supérieur	00BB
`	Quote gauche simple	2018
‘	Quote droit simple	2019
“	Double quote gauche	201C
”	Double quote droite	201D
,,	Double low-9	201E

Exemple :
blockquote{quotes: “\201C” “\201E”;}
blockquote:before{content: open-quote; font-weight: bold;}
blockquote:after{content: close-quote; font-weight: bold;}

Utilisation :

Vous écrivez dans un post la ligne suivante :
<blockquote>Errare humanum es!</blockquote>

Ce qui donnera à l’affichage :
“Errare humanum es!,,