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

border-bottom is what you need... and to modify the distance of the line from the text, use padding-bottom.

Answer 2

If you are feeling something is going wrong, you can use zoom: 1;. See this fiddle

(I have removed span but you can set class to your h1 tag.)

CSS

h1 {
    font-family: Calibri, "Helvetica", san-serif;
    line-height: 1.5em;
    color: black;
    font-size: 20px;
    border-bottom: 2px solid red;
    zoom: 1;
}

HTML...

<h1>Introduction</h1>

Answer 3

You should use the border-bottom CSS property.

For HTML, use the below code:

<h1>Introduction</h1>

For CSS, use the below code:

h1
{
    border-bottom:1px solid #CCC;
    padding-bottom:3px;
}

In case, you want to use the float:left, float:right properties, then you have to use width:100% property also. padding-bottom is to optionally give some space between the text and horizontal line.

h1
{
    border-bottom:1px solid #CCC;
    float:left;
    width:100%;
    padding-bottom:3px;
}

Code Demo: http://jsfiddle.net/aASQe/

Answer 4

Why not just use border-bottom? You can remove the span then too..

HTML:

<h1 class="headline">Introduction</h1>

CSS:

h1 {
  width:100%;
  border-bottom: solid 1px #666;
}

Answer 5

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);
}

Answer 6

h1 { border-bottom: 1px solid black }

Adjust size and colour to preference.