小编Log*_*cia的帖子

我很难解决这个谜。我创建了一个“敲除文本”效果，并使用：after将分隔符添加到了h2中。除了iOS（10.3.2）上的Safari之外，它在我测试过的所有内容上看起来都很棒。

链接到一个无用的临时修复小提琴。

h2.gradient {
    color: #013c65;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
    background: linear-gradient(1deg, #800909, #332222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
h2.gradient:after {
    content: '';
    position: relative;
    display: block;
    height: .12em;
    width: 2.5em;
    background-image: linear-gradient(1deg, #800909, #332222);
    top: .5em;
}

像问题看起来都似乎是相结合background-clip: text;，text-fill-color: transparent;并与伪元素：display: block;。

我能够绝对定位并内联显示伪元素。目前，我已经将标头包裹<div class="special-heading">在div之后并添加了分隔符。

iOS会不会有这样的原因，或者其他人也遇到过类似的问题吗？我发现添加零宽度的空间​使它神奇地工作了。

但是，我认为这可能是一个错误，因为我可以偶尔在Mac上打开Web检查器的情况下使用原始方法。

感谢您的想法！