Есть ли способ использовать href="tel" в CSS?

Question

В настоящее время я делаю сайт, используя конструктор под названием "Elementor". В моем нижнем колонтитуле я добавил значок, который я хотел бы сделать кликабельным, чтобы при нажатии на него на телефоне он использовал href="tel" функция и выскакивает номер на вашем экране набора номера.

Тем не менее, я не могу найти способ сделать это с помощью CSS, так как Elementor только позволяет мне добавлять пользовательские CSS к иконкам. Само число под значком кликабельно, но это делается с помощью следующего HTML:

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

Есть ли способ сделать это с помощью CSS?

Answer 1

CSS не сможет обернуть вокруг него якорь, так как он используется для стилизации элементов.

1. Ваши варианты будут заключаться в том, чтобы как-то получить значок внутри тегов, которые в данный момент есть.

2. Используйте CSS для стилизации текущего тега, используя background-image и padding.

3. Используйте jQuery, чтобы обернуть его в якорь.

Answer 2

Да, вы можете использовать селектор атрибутов css

Answer 3

С псевдоэлементом

a:before {
  content: '\260E';
}

a {
  display: flex;
  flex-direction: column;
  text-align: center;
  text-decoration: none;
}

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