Menu
I am trying to place a 100% horizontal line (rule) automatically beneath every instance of an
<h1>
header tag using CSS.
Example of what I'd like to see:
--- snip 8< ---
Introduction
--- snip 8< ---
I have this in my CSS:
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
And I have this in my main HTML page:
<body class="mypage">
<h1><span class="headline">Introduction</span></h1>
I cannot figure out how to have a horizontal line appear beneath every use of the headline class.
364
You should use the border-bottom CSS property. 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. Save this answer.
Adding the Horizontal line using CSS Properties: In this case, we will be using the border-style Property to create the horizontal line. We can either use the border-top property that specifies the style of the top border or the border-bottom property, which can set the style of the bottom border of an element.
A horizontal rule is used to provide a visual break and divide content. Like other HTML elements, horizontal rules can be styled using CSS (and SVG).
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
