Using CSS classes to Format a href:tel link

Question

I've recently inherited a site that's built entirely in HTML and CSS and uses an FTP portal. In the interest of making the site more mobile friendly I'm trying to implement click-to-call phone numbers throughout their website. The code I'm been using for the click to call is the classic:

<a href="tel:#number">#number></a>

There is a master CSS document for the site that provides the formatting for the various elements of their site. There is a .phonenumber class that sets the phone numbers at a size of 48px, makes the font arial, and red. Currently all the phone numbers are coded like so:

<span class="phonenumber"> phone #</span>

However, this formatting disappears when I turn the phone # portion into a <a href=tel> . Even though the link is between the <span> the formatting does not seem to apply. Is there a way to format a click-to-call link using CSS classes? Or to manually set the attributes so that the number retains its red, 48px formatting while still acting as a link? Right now it appears I can either have it as a link or have it formatted. Please let me know if there is a work around.

Answer 1

You can use Attribute Selectors to match the begining of the href value to "tel" , using the prefix comparision ^= :

a[href^="tel:"] {
}

This would match only the a tags which href property starts with the "tel" value:

Example:

 a[href^="tel:"] { color: red; } 

 <a href="http://www.google.com">Test 1</a><br /> <a href="tel:+123456">Test 2</a> 

Answer 2

It sounds like the CSS is selecting the phone number by referencing its parent than just a span. Kinda like so:

#parent_container_of_span span

Thus when you change it to a link it breaks the CSS. There is also probably some additional formatting being applies to links in general that's messing up stuff.

See if you can go into the CSS and find the part which applies the styling to the span and change it to the following

a[href="tel"] {
    /*styles here*/
}

That should do the trick.

Answer 3

You just need to target all elements where the href attribute begins with tel: .

a[href ^= 'tel:'] {
    font-weight: bold;
}

Answer 4

This what you need

a[href^="tel:"]
{
// your desired style
}