HTML<\/h4>\r\n\r\n\r\n<table>\r\n <tr>\r\n <td colspan="4" color="#ff6b35">\r\n <a style="color:#ff6b35;text-decoration:none;" href="#">Privacy Notice<\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#">Unsubscribe<\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#">Terms of Use<\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#">Legal Notice<\/a>\r\n <\/td>\r\n <\/tr>\r\n<\/table>\r\n<\/div>\r\n<\/pre>\r\nHere are the hyperlinks in their initial (:linked) state:<\/p>\r\n![\"html](\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/email_anchor_tags_linked-300x20.png\")
\r\n
Here are the hyperlinks after clicking on the “Unsubscribe” hyperlink (:visited) state – MS Outlook 2010<\/p>\r\n![\"html](\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/email_anchor_tags_visited-300x20.png\")
\r\n
The initial thought may be to surround the text inside the anchor element with a <span><\/span>, and using the same color specified in the anchor element. See the updated HTML below:<\/p>\r\nHTML<\/h4>\r\n\r\n\r\n<table>\r\n <tr>\r\n <td colspan="4" color="#ff6b35">\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Privacy Notice<\/span><\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Unsubscribe<\/span><\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Terms of Use<\/span><\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><span style="color:#ff6b35;">Legal Notice<\/span><\/a>\r\n <\/td>\r\n <\/tr>\r\n<\/table>\r\n<\/div>\r\n<\/pre>\r\n\r\nAfter 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><\/span> element.<\/p>\r\nSolution<\/h2>\r\nHTML<\/h4>\r\n\r\n\r\n<table>\r\n <tr>\r\n <td colspan="4" color="#ff6b35">\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Privacy Notice<\/strong><\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Unsubscribe<\/strong><\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Terms of Use<\/strong><\/a>\r\n <a style="color:#ff6b35;text-decoration:none;" href="#"><strong style="color:#ff6b35;">Legal Notice<\/strong><\/a>\r\n <\/td>\r\n <\/tr>\r\n<\/table>\r\n<\/div>\r\n<\/pre>\r\nUsing the <strong><\/span> 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;”<\/span> to your <strong><\/span> element and that should do the trick!<\/p>","protected":false},"excerpt":{"rendered":"Prevent HTML email hyperlinks from turning purple after clicking on them 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 […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[],"yoast_head":"\nHTML email hyperlinks - prevent them from turning purple after clicking<\/title>\n<meta name=\"description\" content=\"Learn how to prevent HTML email hyperlinks from turning purple after clicking on them in an email, even if an inline CSS color style has been applied.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML email hyperlinks - prevent them from turning purple after clicking\" \/>\n<meta property=\"og:description\" content=\"Learn how to prevent HTML email hyperlinks from turning purple after clicking on them in an email, even if an inline CSS color style has been applied.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-30T03:32:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-15T20:58:14+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/email_anchor_tags_linked-300x20.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"3 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/email_anchor_tags_linked-300x20.png\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/email_anchor_tags_linked-300x20.png\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/\",\"name\":\"HTML email hyperlinks - prevent them from turning purple after clicking\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/#primaryimage\"},\"datePublished\":\"2016-04-30T03:32:44+00:00\",\"dateModified\":\"2017-05-15T20:58:14+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Learn how to prevent HTML email hyperlinks from turning purple after clicking on them in an email, even if an inline CSS color style has been applied.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/purple-html-email-hyperlinks\/\",\"name\":\"Prevent anchor elements from turning purple after clicking in HTML emails\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-1p","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/87"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=87"}],"version-history":[{"count":16,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/87\/revisions"}],"predecessor-version":[{"id":269,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/87\/revisions\/269"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=87"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=87"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=87"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Here are the hyperlinks in their initial (:linked) state:<\/p>\r\n\r\n
Here are the hyperlinks after clicking on the “Unsubscribe” hyperlink (:visited) state – MS Outlook 2010<\/p>\r\n\r\n
The initial thought may be to surround the text inside the anchor element with a <span><\/span>, and using the same color specified in the anchor element. See the updated HTML below:<\/p>\r\n 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><\/span> element.<\/p>\r\n Using the <strong><\/span> 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;”<\/span> to your <strong><\/span> element and that should do the trick!<\/p>","protected":false},"excerpt":{"rendered":"Prevent HTML email hyperlinks from turning purple after clicking on them 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 […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[],"yoast_head":"\nHTML<\/h4>\r\n
\r\n
Solution<\/h2>\r\n
HTML<\/h4>\r\n
\r\n