标题下方的 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 时出现。比如

求助

。

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为你