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

Use !important in the text decoration rule. <a href="#" style="text-decoration:none !important;">BOOK NOW</a>

Answer 2

Another way to fool Gmail (for phone numbers): use a ~ instead of a -

404-835-9421 --> 404~835~9421

It'll save you (or less savvy users ;-) the trip down html lane.

I found another way to remove links in outlook that i tested so far. if you create a blank class for example in your css say .blank {} and then do the following to your links for example:

<a href="http://www.link.com/"><span class="blank" style="text-decoration:none !important;">Search</span></a>

this worked for me hopefully it will help someone who is still having trouble taking out the underline of links in outlook. If anyone has a workaround for gmail please could you help me tried everything in this thread nothing is working.

Thanks

Answer 3

I used a combination of not showing links in google, adding links for mso (outlook) and the shy tag, to keep the looks and feels for my company. Some code may be redundant (for my company the looks where more important then the be clickable part. (it felt like a jigsaw, as every change brakes something else)

<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www&shy;.&shy;immothekerfinotheker&shy;.&shy;be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

Hope this helps someone