If you test HTML email campaigns using real devices, then this post may be beneficial to you. In Outlook 2010 for example, hyperlinks in their visited state, may turn purple after you click on them, even if you explicitly declare an inline CSS color style in a <span> element. You wouldn’t be able to detect this if you are using a email testing software such as Litmus. Here is the initial HTML:

HTML

<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#">Privacy Notice</a>
   <a style="color:#ff6b35;text-decoration:none;" href="#">Unsubscribe</a>
   <a style="color:#ff6b35;text-decoration:none;" href="#">Terms of Use</a>
   <a style="color:#ff6b35;text-decoration:none;" href="#">Legal Notice</a>
  </td>
 </tr>
</table>

Here are the hyperlinks in their initial (:linked) state:

Here are the hyperlinks after clicking on the “Unsubscribe” hyperlink (:visited) state – MS Outlook 2010

The initial thought may be to surround the text inside the anchor element with a <span>, and using the same color specified in the anchor element. See the updated HTML below:

HTML

<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Privacy Notice</span></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Unsubscribe</span></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Terms of Use</span></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Legal Notice</span></a>
  </td>
 </tr>
</table>

After testing the email again in Outlook 2010, the links still turn people, despite the code changes above. After experimenting a little bit more, we found our solution. You have to surround the text with a <strong> element.

Solution

HTML

<table>
 <tr>
  <td colspan="4" color="#ff6b35">
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Privacy Notice</strong></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Unsubscribe</strong></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Terms of Use</strong></a>
   <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Legal Notice</strong></a>
  </td>
 </tr>
</table>

Using the <strong> element works, but there is a side effect. The text is now bold. To address this, simply add an inline style of style=”font-weight: normal;” to your <strong> element and that should do the trick!