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?

Gmail, yahoo take their own formatting in Email while displaying.. may that could be the reason. please check how u can format the text-decoration for gmail, yahoo emails... but not using your account with style sheets.. — Murtaza, Jan 25 '12 at 06:02
Try looking at the applied styles in Dragonfly/Firebug/Chrome inspector and see what's overriding your `text-decoration: none` style. — Amos M. Carpenter, Jan 25 '12 at 06:04
Can you try adding a different color, say #777777 here and see if it works ? I'm trying to decipher the problem because you kind of have the solution. — AdityaSaxena, Aug 14 '13 at 08:55
On my gmail, an email newsletter containing the link foo is NOT underlined. But not sure if different browsers, etc have different behavior. — andi, Aug 14 '13 at 15:29
The code you have provided should work in Gmail, Hotmail and Ymail which makes me think that there must be something wrong with your HTML somewhere else which is having side effects. Try to produce the bug with the minimum amount of code possible and see if that helps you work it out. — punkrockbuddyholly, Aug 19 '13 at 08:23
1) Which browser are you using with Gmail / Hotmail? Different browsers will sometimes render the email differently. 2) Can you pastebin the rest of the emailer? Might be another CSS rule in the emailer which is causing a problem — Tom, Aug 19 '13 at 17:00
this is the most shit jobs I have ever done (working on html emails). God bless you boy :D — George Carlin, Jan 13 '17 at 04:02

score 41 · Answer 1 · edited Jan 16 '14 at 21:07

41

<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.

edited Jan 16 '14 at 21:07

TLama

75,147
17
214
392

answered Jan 16 '14 at 20:50

Nathaniel Hoyt

427
4
2

1

Mailchimp user here, it works like a charm (tested with Gmail). Thanks! – LuBre Nov 23 '15 at 12:47
I'm here 6 years after this answer, and it indeed works! I'm amazed! – ckhatton Jul 30 '20 at 11:41

score 7 · Answer 2 · answered Jan 25 '12 at 06:04

7

I see this has been answered; however, I feel this link provides appropriate information for what formatting is supported in various email clients.

http://www.campaignmonitor.com/css/

It's worth noting that GMail and Outlook are two of the pickiest to format HTML email for.

answered Jan 25 '12 at 06:04

Kennith Nichol

338
1
9

1

Text decoration is supported for all clients though, odd that it doesn't work. – Orun Feb 06 '16 at 01:15

score 6 · Answer 3 · answered Aug 28 '14 at 10:10

6

After half a day looking into this (and 2 years since this question was opened) I believe I have found a comprehensive answer to this.

<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>

(You need the text-underline property on the span inside the link and the font tag to edit the colour)

answered Aug 28 '14 at 10:10

Tommy Bickerdike

61
1
3

1

I was skeptical when I saw this answer but this actually fixed the issue for me in GMail. text-decoration: none !important just wasn't cutting it. This does indeed remove the underlines. Have an upvote! – James Dec 10 '18 at 17:18
Are you sure this isn't because it's an empty link? – Eoin Jun 26 '20 at 16:45
This approach worked for me while the most common ones are not. – Gokul nath Jul 27 '21 at 14:48

score 5 · Answer 4 · edited Apr 23 '19 at 09:36

5

Use !important in the text decoration rule.

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

edited Apr 23 '19 at 09:36

barbsan

3,418
11
21
28

answered Aug 13 '13 at 11:30

Teshan N.

2,307
3
30
59

That's because Outlook strips `!important` – Eoin Jun 22 '19 at 17:41
2

Not only does Outlook strip `!important` but it also strips the style it's connected to. In Outlook this would get parsed as `BOOK NOW` effectively doing nothing. – jkupczak Jan 24 '20 at 18:02

score 5 · Answer 5 · answered Oct 25 '19 at 18:10

5

Windows Mail seemed to outright ignore inline text-decoration tag but what fixed it for me was by adding this to the head:

<!--[if (mso)|(mso 16)]>
<style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
</style>
<![endif]-->

answered Oct 25 '19 at 18:10

RisingSun

1,693
27
45

1

finally one that works! Thanks bud, Windows Mail was ignoring everything but this solution – James Osguthorpe Jul 25 '21 at 15:42

Bryan Labuschagne · Answer 6 · 2015-07-15T09:49:47.753

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

score 2 · Answer 7 · edited Nov 29 '12 at 17:44

2

I think that if you put a span style after the <a> tag with text-decoration:none it will work in the majority of the browsers / email clients.

As in:

<a href="" style="text-decoration:underline">
    <span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>

edited Nov 29 '12 at 17:44

Jomoos

12,823
10
55
92

answered Nov 29 '12 at 17:24

Ricardo

45
2

9

All you guys who upvoted this, did you actually try it? It doesn't work. The tag still has an underline; it looks no different than BANANA. – andi Aug 15 '13 at 18:47
this is working (sans the anchor declaration) in Office 2010 via parallels for mac running windows 7 and windows XP. The `text-decoration` declaration for the anchor tag style is unnecessary, however. Please note, this seems to NOT work in many situations if you add `!important` to the declaration on the span, otherwise it performs as desired – Brandt Solovij Apr 17 '14 at 00:00

score 2 · Answer 8 · answered Jun 28 '16 at 16:00

2

I added both declarations on the a href which worked in outlook and gmail apps. outlook ignores the !important and gmail needs it. Web versions of email work with both/either.

text-decoration: none !important; text-decoration: none;

answered Jun 28 '16 at 16:00

Steven Collins

373
2
8
20

retrovertigo · Answer 9 · 2016-07-01T04:38:50.400

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>

score 1 · Answer 10 · answered Oct 18 '15 at 11:56

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>

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

score 1 · Answer 11 · answered Jan 14 '16 at 00:00

Text decoration none was not working for me, then i found an email in outlook that did not have the line and checked the code:

<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>

This one is working for me.

score 1 · Answer 12 · answered Feb 04 '16 at 16:00

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

score 1 · Answer 13 · answered Nov 21 '18 at 03:25

In Windows 10 Mail, you might need to add these in your html head:

<!--[if (mso)|(mso 16)]>
  <style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
  </style>
<![endif]-->

The 'a {text-decoration: none;}' fixed the underline problems :)

score 0 · Answer 14 · edited Aug 18 '13 at 19:58

0

It wholly depends on the email client whether it wants to display the underline under the link or not. As of now, the styles in the body are only supported by:

Outlook 2007/10/13 +
Outlook 2000/03
Apple iPhone/iPad
Outlook.com
Apple Mail 4
Yahoo! Mail Beta

http://www.campaignmonitor.com/css/

edited Aug 18 '13 at 19:58

Josh Lee

171,072
38
269
275

answered Aug 18 '13 at 07:57

Anshu Dwibhashi

4,617
3
28
59

The latest Outlook one is false for text-decoration: none – Eoin Jun 26 '20 at 17:03

score 0 · Answer 15 · answered Aug 19 '13 at 08:53

0

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

answered Aug 19 '13 at 08:53

score 0 · Answer 16 · answered Aug 19 '13 at 18:07

0

Here in http://www.campaignmonitor.com/css/, a nice explanation to say this is restricted! And a pretty nice guide to know all limitations of CSS in email clients.

answered Aug 19 '13 at 18:07

Exception

8,111
22
85
136

score 0 · Answer 17 · answered Feb 12 '15 at 14:52

You can do "redundant styling" and that should fix the issue. You use the same styling you have on the but add it to a that is within the .

Example:

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

score 0 · Answer 18 · edited Mar 25 '15 at 03:23

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

score 0 · Answer 19 · answered Jul 07 '15 at 05:20

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>

score 0 · Answer 20 · answered Dec 17 '15 at 23:05

0

I copied my html page and pasted to word. Edited the signature in word deleting the spaces where the underline is placed and make my own "padding" presssing space bar. Copied again and pasted to Outlook 2013. Worked fine for me.

answered Dec 17 '15 at 23:05

Ewerton

4,046
4
30
56

Camilo Vallejo · Answer 21 · 2022-12-02T20:50:16.820

0

In my case, I configured the signature (copy and paste in gmail) using Safari. I tried every code you putted here, but those didn´t worked. After you paste the signature using Safari, you can come back to Chrome and the underline is gone.

edited Dec 02 '22 at 20:50

answered Dec 02 '22 at 20:49

Camilo Vallejo

1
1

score 0 · Answer 22 · answered Feb 22 '23 at 14:48

0

Using text-decoration: unset; inside the style of the element works for GMAIL

answered Feb 22 '23 at 14:48

Joanna Avalos

51
3

score 0 · Answer 23 · answered Jul 09 '23 at 14:52

0

Just use the following css to avoid anchor tag default css styling:

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

answered Jul 09 '23 at 14:52

Mokesh S

683
6
11

score -1 · Answer 24 · edited Apr 23 '19 at 09:38

-1

All you have to do is:

<a href="" style="text-decoration:#none; letter-spacing: -999px;">

edited Apr 23 '19 at 09:38

barbsan

3,418
11
21
28

answered Dec 28 '18 at 07:48

Ömer Doğan

501
1
6
21

Whaaaa? How does letterspacing help here? – Eoin Jun 26 '20 at 17:05

Danny Aditya · Answer 25 · 2019-04-29T02:22:49.287

-2

place your "a href" tag without any styling before div / span of text. then make your styling in the div/span tag.

for the most restricted styling email client.

<div><a href=""><span style="text-decoration:none">title</span><a/></div>

edited Apr 29 '19 at 02:22

answered Apr 23 '19 at 07:56

Danny Aditya

1
2

score -3 · Answer 26 · answered Jan 25 '12 at 05:47

-3

You should write something like this.

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

answered Jan 25 '12 at 05:47

defau1t

10,593
2
35
47

oh, this is now edited. but the question was not posted like this. – defau1t Jan 25 '12 at 05:53
Perhaps `BOOK NOW` works? – yunzen Jan 25 '12 at 08:58
The question was posted like this - here is [first question version](https://stackoverflow.com/revisions/8998378/1) – Kamil Kiełczewski Nov 18 '19 at 12:18

How do I remove link underlining in my HTML email?

26 Answers26

Linked

Related