Posted on by Mark Linton

Fancy Rule

I got this technique for producing fancy horizontal rules (see below) from Dive Into Accessibility.

It seems to work pretty well.

Here is the code from the style sheet:

div.hr {display: none}
/*/*/a{}
div.hr {
    display: block;
    height: 65px;
    background-image: url(images/fancyrule.gif);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 1em 0 1em 0;
}
hr.fancy {display:none}
/* */

Here is the code to place the rule on the page:

<div class="hr"></div><hr class="fancy" />