css gradient line below heading - css

Question

I have this gradient line:
hr {
margin: 10px 0px;
border: 0;
height: 2px;
background: #a60000;
background-image: -webkit-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -moz-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -ms-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -o-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
}
I want to replace the border-bottom in this css with the same gradient line:
h2{
color: #000000;
padding: 0em;
font-size: 1.5em;
margin: 4px 0 16px 0;
font-weight: bold;
border-bottom: 2px solid #a60000;
}
I have tried using hr:after {, but the background-image will appear at the top of the text not as a line below the text.
I want it to appear each time h2 is used. Such as < h2 >Find Help< /h2 >.

Answer 1

Have you tried ::after?
h2::after{
position:absolute;
top:100%;
left:0px;
content:" ";
width:100%;
height:2px;
background: #a60000;
background-image: -webkit-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -moz-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -ms-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -o-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
}
also add:
h2{
position:relative;
}
I've created a jsFiddle for you