La balise <hr> (ou <hr /> en XHTML), qui signifie horizontal rule, est une règle horizontale servant de séparation, pouvant marquer un changement notable dans le contenu. L'une de ses utilisations courantes est de marquer la fin de blocs flottants grâce à la propriété clear qui lui permet de gérer les débordements dûs aux positionnements flottants.
Styler la balise <hr>
Le premier problème à contourner est alors celui de la décoration de la balise <hr> puisque les différents navigateurs ne sont pas d'accord entre eux. Certains liens anglophones sont alors bien utiles :
- http://www.sitepoint.com/examples/hr/ [en]
- http://css-tricks.com/simple-styles-for-horizontal-rules/ [en]
On y apprend, entre autre, que la couleur de la règle se définit soit par la propriété color, soit par background-color.
Un exemple concret ?
L'exemple ci-dessous ne nécessite aucune image, se base sur des caractères unicode. Fonctionne à partir de IE8.
hr {
display: block;
clear: both;
height: 0;
margin: 40px 0 80px;
padding: 0;
border: 0;
font-family: arial;
text-align: center;
font-size: 60px;
line-height: 1;
}
hr:after {
content: "\273D \273D \273D";
height: 0;
letter-spacing: 1em;
color: #aaa;
}
Les marges de <hr>
Cependant, un problème de marge apparaît irrémédiablement sur les anciennes versions Internet Explorer (<IE8) : quoi que l'on fasse il reste un espace entre la règle et le contenu qui la précède.
Une autre méthode semblerait porter ses fruits dans une certaine mesure : appliquer des marges verticales négatives de la hauteur d'un demi caractère de référence.
hr {
height: 1px;
margin: -0.5em 0;
padding: 0;
color: #F00;
background-color: #F00;
border: 0;
}
Cette méthode réduit l'espace supérieur sur IE (pas l'espace inférieur), sans - curieusement - modifier le comportement sur les moteurs Gecko (Mozilla, etc).