Styling underline on links in Outlook

[Jo_Pitts1]

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

[Dave_Roberts · Accepted solution]

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?

[Jo_Pitts1]

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