How do I remove link underlining in my HTML email?

Question

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;">BOOK NOW
    </a>
</td>

I used this code to make a link in my HTML email. In browsers and Outlook it's working nicely, but in GMail, Hotmail, and ymail it shows links underlined.

Can anyone help me to get rid of this?

Answer 1

Code like the lines below worked for me in Gmail Web client. A non-underlined black link showed up in the email. I didn't use the nested span tag.

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

Note: Gmail will strip off any incorrect inline styles. E.g. code like the line below will have its inline styles all stripped off.

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>

Answer 2

<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>

Outlook will strip out the style with !important tag leaving the regular style, thus no underline. The !important tag will over rule the web based email clients' default style, thus leaving no underline.

Answer 3

All email clients adjust the HTML and the CSS code you provide by their own rules:

e.g.: gmail removes everything but the inner HTML of the body tag.

1. for most other clients you can have a style-tag in your header

<style type="text/css">
    a {text-decoration: none !important;}
</style>

note: don't use CSS comments as YAHOO!Mail might cause trouble.

2. to be on the save side add the same code inline into the A tag as you did and an extra span tag as well (the style rules in a tags get often removed)

<a href="" style="text-decoration: none !important;">
    <span style="text-decoration: none !important;">
        text
    </span>
</a>

Answer 4

Use text-decoration:none !important; instead of text-decoration:none; to make sure you "lose" the underline.

Answer 5

To completely "hide" underline for <a> in both mail application and web browser, can do the following tricky way.

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

1. Color in 1st <span> is the one you don't need, MUST set as same as your background color. (red in here)

2. Color in 2nd <span> is the one for your button text. (white in here)

Answer 6

While viewing the html email try inspecting the element on that link and see what is overwriting it. Use that class and define it that style again in your head style and define the text-decoration: none !important;

In my case these are the classes that are overwriting my inline style so declared this on the head of my html email and defined the style that I want implemented.

It worked for me, hope it will work on your one too.

.ii a[href]{
text-decoration: none !important;
}

#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}   

#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}