CODEWITHSUNDEEP
htmlcssemail
Peter Featherstone
Peter Featherstone

Reputation: 8102

Removing Underlined Links On Email On iPhone

I don't know if this is just happening for iPhone or all smartphones as I only have access to an iPhone at this moment but it is forcing underlining on all links.

I have added text-decoration:none; to the span AND the a element both using in-line styles and classes but it still shows, below is the code:

<a href="http://www.example.com" style="text-decoration: none;" class="appleLinks">

<span style="text-decoration:none;" class="appleLinks" >

Example Link

</span>

</a>

I also have the following in my <head> section inside <style> tags:

a               { text-decoration: none; }
a:link          { text-decoration: none; }
a:visited       { text-decoration: none; }
a:hover         { text-decoration: none; }
a:active        { text-decoration: none; }
a:focus         { text-decoration: none; }

.appleLinks     { text-decoration: none; }

I can't think what else I could add to the links to make the underlining disappear

Upvotes: 0

Views: 6092

Answers (4)

mtthwmsn
mtthwmsn

Reputation: 101

I found that some clients (Apple Mail, specifically) apply border styles to a tags. The following CSS worked for me:

a[class="no_underline"] {text-decoration:none !important; border-bottom:none;}

Upvotes: 0

josh1978
josh1978

Reputation: 748

The best thing that works for me is:

a[href^=tel] { color:#000000 !important; text-decoration:none !important; }

Upvotes: 1

John
John

Reputation: 12193

How about losing the inner span and just doing:

<a href="" style="color: #000001; font-weight: bold; text-decoration: none;">Link</a>

This always works fine (At least on Litmus previews anyway).

UPDATE:

Try this:

.appleLinks a  { text-decoration: none !important; }

Reference here. I'm thinking the a is because there is a href put in there dynamically by your client.

Upvotes: 3

sangram parmar
sangram parmar

Reputation: 8726

try this

a               { text-decoration: none !important; }
a:link          { text-decoration: none !important; }
a:visited       { text-decoration: none !important; }
a:hover         { text-decoration: none !important; }
a:active        { text-decoration: none !important; }
a:focus         { text-decoration: none !important; }

.appleLinks     { text-decoration: none !important; }

Upvotes: 0

Related Questions