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 с одной и той же линии градиента:

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

Я попытался с помощью час : after {, но фоновое изображение будет отображаться в верхней части текста не как строка под текстом.

Я хочу, чтобы он появлялся каждый раз, когда используется h2. Например, < h2> Найти Помощь </h2>.

Answer 1

Вы попробовали ::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); 
} 

также добавить:

h2{ 
    position:relative; 
} 

Я создал jsFiddle для вас