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>

这里是 safari 输出

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>