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>。

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