有没有办法在 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 来设置当前标签的样式，使用 background-image 和 padding。

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

Answer 2

是的，您可以使用css attribute selector

    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>