css - 見出しの下のCSSグラデーションライン.

Question

私はこのグラデーションラインを持っています:

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

このcssのborder-bottomを同じグラデーションラインに置き換えたい:

h2{
    color: #000000;
    padding: 0em;
    font-size: 1.5em;
    margin: 4px 0 16px 0;
    font-weight: bold;
    border-bottom: 2px solid #a60000;
 }

hr:after { を使用してみましたが、背景画像はテキストの下の行としてではなく、テキストの上部に表示されます。

h2 が使用されるたびに表示されるようにします。< h2 >ヘルプを探す< /h2 >など。