SOLVED

Styling underline on links in Outlook

Go to solution
Jo_Pitts1
Level 5

Styling underline on links in Outlook

Good afternoon all.

I have a need to be able to apply a different underline colour to links in an email.  I've got it working just fine in all clients except (you guessed it) Outlook Desktop for windows.

 

I've tried two variants, one straightforward 

<a href="https://www.nunya.biz.nz/" style="text-decoration: underline #00BDCE; color:#4F4F4F;">www.nunya.biz.nz</a>

 

and one where I put the display text in a span and style that

<a href="https://www.nunya.biz.nz/" style="text-decoration: underline #00BDCE; color:#4F4F4F;"><span style="text-decoration: underline; text-decoration-color:#00BDCE;">www.nunya.biz.nz</span></a>

 

Both work across a range of clients, but neither works in Outlook desktop on Windows.

 

Any thoughts, or is this just not possible in Outlook?

 

Cheers

Jo

1 ACCEPTED SOLUTION

Accepted Solutions
Dave_Roberts
Level 8

Re: Styling underline on links in Outlook

Hey Jo,

 

I don't think that you can use the "text-decoration-color" property in Outlook. Here's a link to "Can I email" which I reference a lot for these kinds of things: https://www.caniemail.com/features/css-text-decoration-color/

 

You might try to think about adding a border to the bottom of the element instead of using the text-decoration. You might need to try a <span style="display:inline-block; border-bottom:1px solid red;">...</span> and see how that goes?

View solution in original post

2 REPLIES 2
Dave_Roberts
Level 8

Re: Styling underline on links in Outlook

Hey Jo,

 

I don't think that you can use the "text-decoration-color" property in Outlook. Here's a link to "Can I email" which I reference a lot for these kinds of things: https://www.caniemail.com/features/css-text-decoration-color/

 

You might try to think about adding a border to the bottom of the element instead of using the text-decoration. You might need to try a <span style="display:inline-block; border-bottom:1px solid red;">...</span> and see how that goes?

View solution in original post

Jo_Pitts1
Level 5

Re: Styling underline on links in Outlook

Dave,

that was super useful.  I ended up with (as is so often the case) a bunch of overly long inline CSS to take account of various clients.

style="color:white; text-decoration: none; text-decoration: underline; -webkit-text-decoration-color:#00BDCE; text-decoration-color:#00BDCE; text-underline-color:#00BDCE;">

Stupid stupid email coding :).

Thanks.

Cheers

Jo