html - Horizontal rule/line beneath each <h1> heading in CSS -


i trying place 100% horizontal line (rule) automatically beneath every instance of an

 <h1> 

header tag using css.

example of i'd see:

--- snip 8< ---

introduction


--- snip 8< ---

i have in css:

.mypage .headline {     font-family: calibri, "helvetica", san-serif;     line-height: 1.5em;     color: black;     font-size: 20px; } 

and have in main html page:

<body class="mypage"> <h1><span class="headline">introduction</span></h1> 

i cannot figure out how have horizontal line appear beneath every use of headline class.

you can try using pseudoclass :after. . have used kind of styling in 1 of applications.

http://jsfiddle.net/ffmfq/

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

you can tidy little more style 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); } 

Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -