关于伪后元素的webkit-tap-highlight-color

Question

我正在使用“after”伪元素的content-property来在我的页脚链接之间添加分隔符。

.link::after {
    content: " | ";
}

在iOS上，包含它的after-pseudo-element的整个元素会突出显示。这种行为是不需要的 - 我希望在其父元素（“真实”元素）处于活动状态时不会突出显示后内容。

Here's a screenshot of an clicked link on an iOS device

分别为after-element设置tap-highlight-color-property似乎没有任何效果。

jsfiddle representing this problem

是否有任何css方法可以解决此问题，还是我必须更改非css代码以使分隔符不被突出显示？

Answer 1

尝试使用这两个：

.link,
.link::after {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

更多SO答案和链接here。