有没有办法在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

带有伪元素

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>

Answer 3

是的，您可以使用 css attribute selector

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

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