Horizontal rule/line beneath each

Question

I am trying to place a 100% horizontal line (rule) automatically beneath every instance of an

header tag using CSS.

Example

Answer 1

You can also try using Pseudoclass :after. . I have used this kind of styling in one of my applications.

http://jsfiddle.net/ffmFQ/

h1:after
{
    content:' ';
    display:block;
    border:2px solid black;
}

You can tidy up little more to style something like this:- http://jsfiddle.net/5HQ7p/

h1:after {
    content:' ';
    display:block;
    border:2px solid #d0d0d0;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}