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

Question

我正在使用“after”伪元素的内容属性在我的页脚链接之间添加分隔符。

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

在 iOS 上，整个元素（包括它的后伪元素）都会突出显示。这种行为是不受欢迎的 - 我希望在其父元素（“真实”元素）处于活动状态时不会突出显示后续内容。

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

为后元素单独设置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。