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

Question

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

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

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

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

Answer 1

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

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 2

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

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

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

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