是否可以使 :before 伪元素在 iOS 上可点击电话号码？答案

【问题标题】：It it possible to make the :before pseudo element clickable for a phone number on iOS?是否可以使 :before 伪元素在 iOS 上可点击电话号码？
【发布时间】：2020-01-15 13:48:41
【问题描述】：

所以我在 div 555-1212 中有一个电话号码，在 iOS 上，该电话号码是可点击的，电话会为您拨打电话，所以一切正常。现在我在 .phoneNum 上附加了一个 :before 伪元素，它基本上是一个电话听筒图标。

当用户滚动时，我所做的是使用可见性隐藏电话号码 div：hidden 但只允许显示手机图标（:before）但点击手机没有任何作用，因为 iOS 仅将号码识别为.phoneNum div 而不是 :before 伪元素

是否有任何干净的方法让 iOS 将整个 div 识别为电话号码，包括 :before 部分？

谢谢！！

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用锚标记并以 tel: 开头的 href 来强制链接。

&lt;a href="tel:555-1212"&gt;555-1212&lt;/a&gt;

【讨论】：

如果我这样做了，我会从 iOS 收到这个奇怪的弹出窗口，说该网站已被阻止自动拨打电话。用户仍然可以允许呼叫，但它不像本地电话呼叫那样灵活，iOS 识别号码并将其转换为链接
@Mark 我的猜测是，否则你将无法实现它，因为这可能是 iOS 试图防止恶意人员使用图像显示不同号码并获得另一个电话号码的欺骗性策略调用。