有没有办法在 CSS 中使用 href="tel" ？

Question

我目前正在使用名为“Elementor”的构建器制作网站。 在我的页脚中，我添加了一个图标，我想让它可以点击，这样当你在手机上点击它时，它会使用href="tel"功能并在拨号屏幕上弹出号码。

但是，我似乎无法找到使用 CSS 执行此操作的方法，因为 Elementor 仅让我将自定义 CSS 添加到图标。 图标下方的数字本身是可点击的，但这是使用以下 HTML 完成的：

<a href="tel:1-562-867-5309">1-562-867-5309</a>

有没有办法使用 CSS 做到这一点？

Answer 1

CSS将无法在其周围包裹锚，因为它用于样式元素。

1. 您的选择是以某种方式在当前存在的标签内获取图标。

2. 使用CSS通过背景图片和填充来设置当前标签的样式。

3. 使用jQuery将其包装在锚点中。

Answer 2

是的，您可以使用css 属性选择器

 a[href ^= 'tel:']:before { content: '\\1F4F1'; }

 <a href="tel:1-562-867-5309">1-562-867-5309</a>

Answer 3

带有伪元素

 a:before { content: '\\260E'; } a { display: flex; flex-direction: column; text-align: center; text-decoration: none; } 

 <a href="tel:1-562-867-5309">1-562-867-5309</a>