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

Question

I'm currently making a website using a builder called 'Elementor'. In my footer, I added an icon which I would like to make clickable, so that when you click it on your phone it uses the href="tel" function and pops up the number on your dial screen.

However, I can't seem to find a way to do this using CSS, as Elementor only let's me add custom CSS to icons. The number itself below the icon is clickable, but this is done using the following HTML:

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

Is there any way to do this using CSS?

Answer 1

CSS won't be able to wrap an anchor around it as it is used for styling elements.

1. Your options would be to somehow get the icon within the tags that are currently there.

2. Use CSS to style the current tag using background-image and padding.

3. Use jQuery to wrap it in an anchor.

Answer 2

Yes you can use css attribute selector

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

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

Answer 3

With a pseudo-element

 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>