The Easier Horizontal Rule

One of the most flexible ways to style a horizontal rule and to make sure it’s cross-browser compatible, you typically "hide" the <hr /> inside of a stylized "DIV". Although this works well and is easy for a designer/developer to implement, it’s not easy for clients who are managing their own HTML or if you’re updating an old or existing site that is full of <hr /> references.

.hr {
    background: #ccc;
    width: 100%;
    height: 1px;
    display: block;
    margin: 25px 0;
    }
.hr hr { display: none; }

…and then calling the horizontal rule by:

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

Although this works well and easy for developers and is cross-browser compatible, it’s not easy for clients who are managing their own HTML, using a CMS (content management system), or if they’re exporting their HTML from other sources.

The Easy Way

Use this code example below and you can finally stop working about that silly little line.

hr {
    background-color: #ccc;
    border: 0;
    color: #ccc;
    width: 100%;
    height: 1px;
    text-align: left;
    margin: 25px 0;
    }

Do you like this?

Share

Tags / Related Content:

Clients CSS XHTML

Comments