{"id":16,"date":"2004-06-28T23:12:57","date_gmt":"2004-06-29T07:12:57","guid":{"rendered":""},"modified":"2016-05-25T23:34:40","modified_gmt":"2016-05-26T06:34:40","slug":"radical-links","status":"publish","type":"post","link":"https:\/\/mikeindustries.com\/blog\/archive\/2004\/06\/radical-links","title":{"rendered":"Making Visited Links Radical"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/mikeindustries.com\/blog\/images\/inline\/radical.gif\" width=\"75\" height=\"100\" border=\"0\" alt=\"\" class=\"rightinline\" \/>Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they&#8217;ve been.  People with actual design taste use more palatable colors, or perhaps a font-weight variation instead. When Mike Industries launched, visited links differentiated themselves with a <span style=\"background-color:#E9E9E9\">subtle grey background<\/span>.<\/p>\n<p>Although I liked the grey background implementation, it started to look more like a highlighter pen than anything else.<\/p>\n<p>I decided to rethink the situation.<\/p>\n<p>Since doing normal stuff is no fun, I decided to experiment with the :after pseudo class. What character could one insert after a link to indicate that the link had already been checked?  Hmmm.  How about a checkmark? The standard ISO character set gives us the mathematical &#8220;radical&#8221; sign (&radic;) which looks remarkably like a hand sketched checkmark at small sizes. So this should be easy, right?  You&#8217;d think something like this would do the trick:<\/p>\n<pre>\na:visited:after {\n\tcontent: \" &amp;radic;\";\n\tfont-size: 75%;\n}\n<\/pre>\n<p>Nope. It turns out that prints the actual encoded character series for radical after each link.  But by using the unicode entity instead ( \\221A ), the checkmark renders perfectly after each visited link:<\/p>\n<pre>\na:visited:after {\n\t<del>content: \" \\221A\";<\/del>\n\t<ins>content: \"\\00A0\\221A\";<\/ins>\n\tfont-size: 75%;\n}\n<\/pre>\n<p><em>* Thanks to Jens Meiert for improving this technique as illustrated above by using a non-breaking space before the radical, instead of a regular space.<\/em><\/p>\n<p>I am not so naive to think this has never been done before, but I certainly do like the effect. Sure, the :after pseudo class isn&#8217;t supported in PC IE, but at least it degrades silently in feature-challenged browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they&#8217;ve been. People with actual design taste use more palatable colors, or perhaps a font-weight variation instead. When Mike Industries launched, visited links differentiated themselves with a subtle grey background. Although I liked the grey background [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[37,282],"tags":[],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-code","category-original"],"_links":{"self":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":0,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikeindustries.com\/blog\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}