2019-10-19
Style mail and phone
Links often contain regular urls but in some cases they link to e-mail addresses or phone numbers. Here is a way to style those individually.
Solution
/* E-mail */
a[href^=mailto] {
background: blue;
}
/* Phone number */
a[href^=tel] {
background: green;
}
HTML
E-mail will in this example be blue, phone will be green and the regular link will be unstyled.
<a href="mailto:info@csspoo.com">E-mail</a>
<a href="tel:+123456789">Phone</a>
<a href="https://example.com">Link</a>Put text before
In some cases it's better to put a text magically before the e-mail to phone number. That can be done with :before like below. The \00a0 makes a space.
/* E-mail */
a[href^=mailto]:before {
content: "E-mail:\00a0";
}
/* Phone number */
a[href^=tel]:before {
content: "Phone:\00a0";
}Sources:
Comments