Safari浏览器的底部边框渐变支持

Question

有什么方法可以支持Safari浏览器的底部边框渐变，只有Safari浏览器不支持此功能

 h2 {
    color: #606060;
    font-size: 40px;
    display: inline-block;
    position: relative;
}
 h2::after {
    content: '';
    position: absolute;
    left: 10%;
    display: inline-block;
    height: 1em;
    width: 80%;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #CA49D9, #2452A2);
    border-image-slice: 1;
    opacity: 0.6;
    margin-top: 15px;
}

<h2>How it works</h2>

这是野生动物园的输出

Answer 1

我在0px处添加了其他边框属性（左，右和上），并且在所有浏览器中均可使用。 这是小提琴http://jsfiddle.net/Aravi/1da8nx5g/1/

h2 {
    color: #606060;
    font-size: 40px;
    display: inline-block;
    position: relative;
}
 h2::after {
    content: '';
    position: absolute;
    left: 10%;
    display: inline-block;
    height: 1em;
    width: 80%;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #CA49D9, #2452A2);
    border-image-slice: 1;
    opacity: 0.6;
    margin-top: 15px;
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
}

<h2>How it works</h2>