How do I remove link underlining in my HTML email

Question

lt td width  110  align  center  valign  top  style  color  000000   gt       lt a href  https   example com  target   blank         style  color  000000  text-decoration none   gt BOOK NOW      lt  a gt   lt  td gt    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

User · Answer

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

User · Answer

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

User · Answer

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    lt span style  font-size  12px  font-family   Arial   Verdana    sans-serif   color  black  text-decoration-line  none   gt   lt a href  http   www test com  style  font-size  9 0pt  color   C69E29  text-decoration  none   gt  lt span gt www test com lt  span gt  lt  a gt   lt  span gt    This one is working for me

User · Answer

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    lt td width  110  align  center  valign  top  style  color  000000   gt       lt a href  https   example com  target   blank         style  color  000000  text-decoration none   gt  lt span style  color  000000  text-decoration none   gt BOOK NOW lt  span gt  lt  a gt   lt  td gt

User · Answer

Use  important in the text decoration rule    lt a href     style  text-decoration none  important   gt BOOK NOW lt  a gt

User · Answer

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

User · Answer

You should write something like this    lt a href     style  text-decoration none   gt BOOK NOW lt  a gt

User · Answer

I think that if you put a span style after the  lt a gt  tag with text-decoration none it will work in the majority of the browsers   email clients   As in    lt a href    style  text-decoration underline  gt       lt span style  color  0b92ce  text-decoration none  gt BANANA lt  span gt   lt  a gt

User · Answer

Windows Mail seemed to outright ignore inline text-decoration tag but what fixed it for me was by adding this to the head    lt  -- if  mso   mso 16   gt   lt style type  text css  gt      body  table  td  a  span   font-family  Arial  Helvetica  sans-serif  important        a  text-decoration  none    lt  style gt   lt   endif -- gt

User · Answer

All you have to do is     lt a href    style  text-decoration  none  letter-spacing  -999px   gt

User · Answer

lt a href     style  text-decoration none  important  text-decoration none   gt BOOK NOW lt  a gt    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

User · Answer

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    lt a href  http   www link com   gt  lt span class  blank  style  text-decoration none  important   gt Search lt  span gt  lt  a gt    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

User · Answer

Use text-decoration none  important  instead of text-decoration none  to make sure you  lose  the underline

User · Answer

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

User · Answer

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

User · Answer

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    lt td style  color rgb 69  54  53   gt   lt  -- if gte mso 9  gt   lt a href  http   www immothekerfinotheker be  style  text-decoration none   gt   lt span style  text-decoration none   gt   lt   endif -- gt  www amp shy   amp shy immothekerfinotheker amp shy   amp shy be  lt  -- if gte mso 9  gt   lt  a gt   lt  span gt   lt   endif -- gt   lt  td gt    Hope this helps someone

User · Answer

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   lt style type  text css  gt      a  text-decoration  none  important    lt  style gt    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    lt a href    style  text-decoration  none  important   gt       lt span style  text-decoration  none  important   gt          text      lt  span gt   lt  a gt

User · Answer

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    lt table gt     lt tbody gt       lt tr gt           lt td gt               lt a href  http   hexinpeter com  style  text-decoration  none  color   000000  important   gt Peter Blog lt  a gt           lt  td gt       lt  tr gt     lt  tbody gt   lt  table gt    Note  Gmail will strip off any incorrect inline styles  E g  code like the line below will have its inline styles all stripped off    lt a href  http   hexinpeter com  style  font-family   text-decoration  none  color   000000  important   gt Peter Blog lt  a gt

User · Answer

To completely  hide  underline for  lt a gt  in both mail application and web browser  can do the following tricky way    lt a href       gt  lt div style  background-color red   gt       lt span style  color red  text-decoration underline   gt  lt span style  color white   gt BUTTON lt  span gt  lt  span gt   lt  div gt  lt  a gt     Color in 1st  lt span gt  is the one you don t need  MUST set as same as your background color   red in here  Color in 2nd  lt span gt  is the one for your button text   white in here

User · Answer

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    lt a href     gt  lt font color   000000  gt  lt span style  text-decoration none text-underline none  gt Link lt  span gt  lt  font gt  lt  a gt     You need the text-underline property on the span inside the link and the font tag to edit the colour

User · Answer

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    lt div gt  lt a href    gt  lt span style  text-decoration none  gt title lt  span gt  lt a  gt  lt  div gt

User · Answer

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

User · Answer

In Windows 10 Mail  you might need to add these in your html head    lt  -- if  mso   mso 16   gt     lt style type  text css  gt      body  table  td  a  span   font-family  Arial  Helvetica  sans-serif  important        a  text-decoration  none      lt  style gt   lt   endif -- gt    The  a  text-decoration  none    fixed the underline problems

[html] How do I remove link underlining in my HTML email?

Examples related to html

Examples related to css

Examples related to html-email

Examples related to email-client

[html] How do I remove link underlining in my HTML email?

Examples related to html

Examples related to css

Examples related to html-email

Examples related to newsletter

Examples related to email-client