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>