• 2019-10-19

    Style mail and phone


    Start a discussion

    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.


    /* E-mail */
    a[href^=mailto] {
      background: blue;
    /* Phone number */
    a[href^=tel] {
      background: green;


    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";