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 should use the border-bottom CSS property.

For HTML, use the below code:

Introduction

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/