Styling underline on links in Outlook | Community
Skip to main content
Jo_Pitts1
Community Advisor
Jo_Pitts1Community Advisor
Community Advisor
February 19, 2021
Solved

Styling underline on links in Outlook

  • February 19, 2021
  • 1 reply
  • 15947 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Dave_Roberts

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?

1 reply

Dave_Roberts
Dave_RobertsAccepted solution
Level 10
February 19, 2021

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
Community Advisor
Jo_Pitts1Community AdvisorAuthor
Community Advisor
February 22, 2021

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 

Terms & ConditionsAccessibility statement

Loading footer...