Skip to Content (Press Enter)
2020-09-08 11-55-15
Linda Potiek
397Views
6Comments
Solved
How to remove blue underline from (certain) links
Question
Email
CSS

I have an application that is sending out e-mails. In the e-mail there are some links which are supposed to have a blue underline, but there is also a button with text in it which is also a link. This specific item should not become underlined in the e-mail. I have tried different options using CSS 'text-decoration: none'. I have applied this to the text, to the link above it in the widget tree, and even added general CSS for links on the whole e-mail.

The outcome is each time that the e-mail looks okay in the Outlook client, but not okay when the e-mail is opened in for instance Outlook webmail, or Hotmail in a browser. Also in Gmail (client) it does not come out right. Even with the general CSS for links (using a:link, a: visited, a: hover and setting all to text decoration:none) the blue underline remains on the link in certain clients and in the browser/webmail. In Outlook all blue underlines are not shown anymore, so the CSS seems to work properly for the Outlook client but not for other clients or webmail.

Is there a solution for this or is it just a fact that this CSS styling just doesn't work for all e-mail clients / browsers?

Many thanks in advance for your time and effort.

0
0
10 Nov 2020
Copy Link
2020-07-29 19-08-40
Sanjay Kumar Sahu
Solution

Hello LindaP,


Yes it's correct, CSS applied in links are email client/browser dependent and may behave different. Perhaps it works well with chrome/gmail/outlook so I would like to suggest you to find out if CSS renders properly on browser by inspecting it. This way you can confirm if you are applying CSS in proper place or OS applying it properly.

 Can you plz take your button inside a container and apply the CSS only for that. For your requirements a:link, a:visited is enough to apply(eg below):

Eg : 

  a:link, a:visited {

  background-color: #f44336;

  color: white;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}


Regards,

Sanjay

See solution in context
1
0
10 Nov 2020
Copy Link
2020-09-08 11-55-15
Linda Potiek

Thanks for your advice, I am going to try this!

0
0
10 Nov 2020
Copy Link
2020-06-04 15-38-19
Samiksha Manekar

Hi Linda,

Can you please share you oml with us?

Thanks,

Samiksha

0
0
10 Nov 2020
Copy Link
2020-09-08 11-55-15
Linda Potiek

Hi Samiksha,


Thank you for your reply.
I can't share my oml with you, since it is not my property.


Best regards,

Linda

0
0
10 Nov 2020
Copy Link
2020-07-29 19-08-40
Sanjay Kumar Sahu
Solution

Hello LindaP,


Yes it's correct, CSS applied in links are email client/browser dependent and may behave different. Perhaps it works well with chrome/gmail/outlook so I would like to suggest you to find out if CSS renders properly on browser by inspecting it. This way you can confirm if you are applying CSS in proper place or OS applying it properly.

 Can you plz take your button inside a container and apply the CSS only for that. For your requirements a:link, a:visited is enough to apply(eg below):

Eg : 

  a:link, a:visited {

  background-color: #f44336;

  color: white;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}


Regards,

Sanjay

1
0
10 Nov 2020
Copy Link
2020-09-08 11-55-15
Linda Potiek

Thanks for your advice, I am going to try this!

0
0
10 Nov 2020
Copy Link
2023-10-16 05-50-48
Shingo Lam

Hi,

just add the style or css include thing like this

text-decoration: none;

Hope this help

0
0
10 Nov 2020
Copy Link
2020-09-08 11-55-15
Linda Potiek

Hi,


Do you mean something different from what I have already tried/described?

0
0
10 Nov 2020
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.