Récemment, je me suis retrouvé à concevoir des styles pour les publications de "courtes histoires" sur mon site personnel, que j'ai décidé de restructurer, passant de WordPress à Octopress et GitHub—un article sur cette expérience à venir !

Quoi qu'il en soit, les courtes histoires tendent à être longues (comme les articles de blog), j'ai donc voulu offrir aux auteurs un moyen facile d'inclure des pauses de section emphatiques et sémantiques. La simple ligne horizontale <hr> semblait être la bonne solution, d'autant plus que Markdown les rend si faciles à inclure—il suffit d'ajouter *** sur une nouvelle ligne.

La plupart des navigateurs rendent la balise <hr> comme une bordure en retrait—essentiellement une ligne sombre empilée directement au-dessus d'une ligne plus claire. Mais ce n'est pas plus excitant qu'une des conférences de deux heures d'Ara sur l'histoire et les avantages des culottes ventilées dans l'Alaska rural.

J'ai donc parcouru le web pour trouver des solutions plus attrayantes et je suis tombé sur un site bien trop familier : Les astuces CSS de Chris Coyier.

Un mot de prudence : comme ces styles reposent sur les sélecteurs de pseudo-éléments :after et :before, IE7 et les versions antérieures ne les rendent pas très bien. Vous devrez peut-être passer du temps à vous débattre avec des styles spécifiques à IE. Ou vous pourriez choisir de faire quelque chose de plus précieux de votre temps.