hr element with an image in its center

If you wish to have a stylish separator with some kind of an ornament in its middle, use:

/* hr separator with ornament*/

hr:after { 
    background: url('images/hrOrnament.gif') no-repeat top center;
    content: "";
    display: block;
    height: 26px; /* height of the ornament */
    position: relative;
    top: -14px; /* half the height of the ornament */
}

/* hr separator with ornament*/

hr:after {

background: url('images/hrOrnament.gif') no-repeat top center;

content: "";

display: block;

height: 26px; /* height of the ornament */

position: relative;

top: -14px; /* half the height of the ornament */

}

Leave a Reply Cancel reply