3

I have tried every suggested approach and I cannot get rid of the blue underline of the links of my Outlook signature on Gmail desktop (it's fine on Gmail Android app).

I tried to apply text-decoration: none !important to all links, on the <a> tag and on the <span> tag. I also tried to overwrite Gmail (using class .ii).

I tried each of them separately but none of them work, I always get a blue underline no matter what I do.

a:link {
    text-decoration: none!important;
}

.ii a[href] {
    text-decoration: none!important;
}
<a href="http://www.google.com" style="color:red; text-decoration:none">
    <span style="color:red; text-decoration:none";>text</span>
</a>

Do you have any idea how to solve this ?

Luke
  • 4,825
  • 2
  • 30
  • 37
Michael D
  • 41
  • 1
  • 2

5 Answers5

0

Your code can be simplified as below. There are a lot of unnecessary/unused styles. However, even with your code, the underline was not there. One more thing, try as possible to avoid !important, and instead rely on css specificity

.info-link{
  text-decoration:none;
  color:red;
}
<body>
<a href="http://www.google.com" class="info-link"><span>text</span></a>
</body>
orabis
  • 2,749
  • 2
  • 13
  • 29
  • Thanks a lot for your help. I must do something wrong. Here is the code I am using: text I still get the issue. I use my HTML file as an signature on Outlook and when I send an e-mail to Gmail, my link is still underlined in blue. Any idea what I do wrong ? – Michael D Dec 26 '17 at 17:10
  • Tried the code, did not have a problem. Here is what I did. I saved the content in an html file. Then, opened the html file, copied its rendered content into the clipboard. Then, I went to my gmail signature and pasted the rich link. The gmail prompted me to update the link, I hit change, in order to make sure that the url will validly refer to google. That's it, and did not find any underlines. – orabis Dec 26 '17 at 17:34
  • The issue may be with my Outlook then as I try this as a signature on Outlook. It works perfectly fine on Oulook and on Gmail Android App but people on Gmail desktop see those ugly blue underline – Michael D Dec 26 '17 at 21:33
  • This kind of simplification does not work in many email clients, especially not when sending with Outlook, css have to be inline, and `text-decoration` is not valid on ` – NiKiZe Dec 15 '21 at 08:15
0

use bootstrap library:

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

and add class="btn" in your anchor tag as:

<a class="btn" style="text-decoration: none;" href="http://www.google.com"><span>text</span></a>
Sunny
  • 577
  • 6
  • 20
  • I still get a blue underline: https://img15.hostingpics.net/pics/991776signaturegmail2.jpg I assume something is wrong in my setup but cannot figureit out. I just use your exact code in a HTML file I use for my signature on Outlook and the link is underlined when I send an e-mail using this signature to Gmail desktop. (on gmail Android app, your solution works perfectly) – Michael D Dec 26 '17 at 17:27
  • send me your code snapshot to my mail id `imsumit0303@gmail.com` – Sunny Dec 26 '17 at 18:22
  • Thanks a lot, I just sent you an e-mail – Michael D Dec 26 '17 at 21:47
  • apply edited code as it is, what I did today. this will work for sure. – Sunny Dec 27 '17 at 11:39
0

try this use CSS text-decoration Property

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

learn more about CSS text-decoration Property

core114
  • 5,155
  • 16
  • 92
  • 189
0

So for gmail in order to pick up the an actual style for a hyperlink anchor ( ) you have to use the following inline css to set the colour and remove the underlining : style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;"

This is how a complete tag would look like : <a href="http://www.google.com/" style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;">Click here to go to Google</a>

AC007
  • 137
  • 9
0

You can remove link underlining in email signatures in Gmail by using a non-Chrome browser to set up the signature, as follows:

  1. Open your email signature in a non-Chrome browser, e.g. Firefox
  2. Copy the signature - select all (Ctrl/Cmd-A), copy (Ctrl/Cmd-C)
  3. Open Gmail - again in a non-Chrome browser (this is important - Chrome's user-agent stylesheet will interfere if you perform this step using Chrome)
  4. Select the Settings (gear) icon > See all settings
  5. Paste the signature into the email signature field
  6. Save

You can now open Gmail in Chrome and compose a new email. The email signature should appear without the underlined links. If it doesn't work the first time (as it for me), delete the draft, reload Gmail and compose again.

Luke
  • 4,825
  • 2
  • 30
  • 37