{"id":547,"date":"2015-06-14T23:15:22","date_gmt":"2015-06-15T04:15:22","guid":{"rendered":"http:\/\/monkeylogic.us\/blog\/?p=547"},"modified":"2016-08-09T15:48:04","modified_gmt":"2016-08-09T20:48:04","slug":"new-hyperlink-styling","status":"publish","type":"post","link":"http:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/","title":{"rendered":"New hyperlink styling"},"content":{"rendered":"

We\u2019ve recently completed a small amount of visual tweaks to the site, mostly pertaining to hyperlinks. Personally, I\u2019ve never cared much for the standard blue text with blue underline look that came as part all hyperlinks back in the pre-CSS days. With the ability to have far better control over text appearance via CSS, it was great to finally modify the appearance of elements as you wanted. I always felt particularly glad for the \u201ctext-decoration: none;\u201d declaration which allows you to remove the underlines from text.<\/p>\n

<\/p>\n

From a design standpoint, if you completely removed the underlines from text you need to provide visitors with another method of knowing when text is a hyperlink. By setting the a:link<\/span> selector to text-decoration: none<\/span> and\u00a0 the a:hover<\/span> selector to text-decoration: underline<\/span> you provide users a method for knowing when text they\u2019re hovered over is a hyperlink.<\/p>\n

I\u2019ve preferred the method of hiding the underlines in a hyperlink since I discovered it, but now that we\u2019re in the days of devices which don\u2019t have pointers, setting up your hyperlinks without a visual indication that they\u2019re hyperlinks can result in site visitors that aren\u2019t aware that text in the middle of a paragraph is clickable.<\/p>\n

A solution to this problem is by coloring your hyperlinks a different color and is what this site used for a long time. What I can see was a huge oversight was using the same color for all hyperlinks as the header text. Most of the headers are set to a fairly large size, but the headers in the blog are a little smaller to save space and taking a closer look at how the site functioned, it was decided we would provide a better visual for hyperlinks.<\/p>\n

\"Our<\/span><\/a><\/div> \r\n\r\n\t\t\t\t
\r\n \"image-548\"\r\n <\/div><\/a>

When hyperlinks and headers collide.<\/p><\/div>\n

We conducting a bit of research into how other sites handle the same issues and by research I mean going to lots of different sites just to see their hyperlinks. One cool effect is to have a hyperlink underline that doesn’t appear under spaces between words and also breaks where the descenders of letters exist. The big downside of this effect is that it only works on sites that have solid color backgrounds because of the CSS being used to generate the effect. Something new I ran across are sites with hyperlinks where the text is one color but the underline is another. I was intrigued as this isn\u2019t something that\u2019s possible with the standard a:link<\/span> and a:hover<\/span> selectors.<\/p>\n

The method of creating this effect, and is now being used on the site,\u00a0 is completely controlled from the CSS example below:<\/p>\n

\n

#content a {<\/p>\n

display: inline-block;<\/p>\n

position: relative;<\/p>\n

}<\/p>\n

 <\/p>\n

#content a::after {<\/p>\n

content: ”;<\/p>\n

position: absolute;<\/p>\n

left: 0;<\/p>\n

display: inline-block;<\/p>\n

height: 1em;<\/p>\n

width: 100%;<\/p>\n

border-bottom: 1px solid #c30;<\/p>\n

margin-top: 0px;<\/p>\n

}<\/p>\n<\/div>\n

The explanation for the effect is all hyperlinks are displayed using the \u201cinline-block\u201d and \u201crelative\u201d values. This allows you to use the pseudo class ::after<\/span> to place a border under the text and control it with the other declarations.<\/p>\n

Once this code is in place we then rely on the standard a:link<\/span>, a:visitied<\/span>, and a:hover<\/span> styles to remove the actual underline, make\/keep all the hyperlinks the same color as the rest of the text, and change the text to a different color when rolled over for people on non-mobile devices.<\/p>\n

The result on this site is hyperlinked text that\u2019s black like the rest of the text, thus making it easier to read because the hyperlinks are the same color as the rest of the text, but visually informs you a hyperlink exists because of the orange underline.<\/p>\n","protected":false},"excerpt":{"rendered":"

Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.<\/p>\n","protected":false},"author":1,"featured_media":562,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-547","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"yoast_head":"\nNew hyperlink styling - monkeylogic blog<\/title>\n<meta name=\"description\" content=\"Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New hyperlink styling - monkeylogic blog\" \/>\n<meta property=\"og:description\" content=\"Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/\" \/>\n<meta property=\"og:site_name\" content=\"monkeylogic blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/MonkeylogicDesign\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-15T04:15:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-08-09T20:48:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monkeylogic.us\/blog\/wp-content\/uploads\/2015\/06\/HyperlinkStyling01featured.png\" \/>\n\t<meta property=\"og:image:width\" content=\"570\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michael (the head monkey)\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael (the head monkey)\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/\"},\"author\":{\"name\":\"Michael (the head monkey)\",\"@id\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/#\\\/schema\\\/person\\\/4d39347fa8dbfebec314b0a130b26aa1\"},\"headline\":\"New hyperlink styling\",\"datePublished\":\"2015-06-15T04:15:22+00:00\",\"dateModified\":\"2016-08-09T20:48:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/\"},\"wordCount\":626,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/HyperlinkStyling01featured.png\",\"articleSection\":[\"Technology\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/\",\"url\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/\",\"name\":\"New hyperlink styling - monkeylogic blog\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/HyperlinkStyling01featured.png\",\"datePublished\":\"2015-06-15T04:15:22+00:00\",\"dateModified\":\"2016-08-09T20:48:04+00:00\",\"author\":{\"@id\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/#\\\/schema\\\/person\\\/4d39347fa8dbfebec314b0a130b26aa1\"},\"description\":\"Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#primaryimage\",\"url\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/HyperlinkStyling01featured.png\",\"contentUrl\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/HyperlinkStyling01featured.png\",\"width\":570,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/monkeylogic.us\\\/blog\\\/new-hyperlink-styling\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"New hyperlink styling\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/#website\",\"url\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/\",\"name\":\"monkeylogic blog\",\"description\":\"Out of Register\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/#\\\/schema\\\/person\\\/4d39347fa8dbfebec314b0a130b26aa1\",\"name\":\"Michael (the head monkey)\",\"sameAs\":[\"http:\\\/\\\/www.monkeylogic.us\"],\"url\":\"http:\\\/\\\/monkeylogic.us\\\/blog\\\/author\\\/head-monkey\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"New hyperlink styling - monkeylogic blog","description":"Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/","og_locale":"en_US","og_type":"article","og_title":"New hyperlink styling - monkeylogic blog","og_description":"Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.","og_url":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/","og_site_name":"monkeylogic blog","article_publisher":"https:\/\/www.facebook.com\/MonkeylogicDesign","article_published_time":"2015-06-15T04:15:22+00:00","article_modified_time":"2016-08-09T20:48:04+00:00","og_image":[{"width":570,"height":200,"url":"https:\/\/monkeylogic.us\/blog\/wp-content\/uploads\/2015\/06\/HyperlinkStyling01featured.png","type":"image\/png"}],"author":"Michael (the head monkey)","twitter_misc":{"Written by":"Michael (the head monkey)","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#article","isPartOf":{"@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/"},"author":{"name":"Michael (the head monkey)","@id":"http:\/\/monkeylogic.us\/blog\/#\/schema\/person\/4d39347fa8dbfebec314b0a130b26aa1"},"headline":"New hyperlink styling","datePublished":"2015-06-15T04:15:22+00:00","dateModified":"2016-08-09T20:48:04+00:00","mainEntityOfPage":{"@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/"},"wordCount":626,"commentCount":0,"image":{"@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#primaryimage"},"thumbnailUrl":"http:\/\/monkeylogic.us\/blog\/wp-content\/uploads\/2015\/06\/HyperlinkStyling01featured.png","articleSection":["Technology"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/","url":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/","name":"New hyperlink styling - monkeylogic blog","isPartOf":{"@id":"http:\/\/monkeylogic.us\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#primaryimage"},"image":{"@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#primaryimage"},"thumbnailUrl":"http:\/\/monkeylogic.us\/blog\/wp-content\/uploads\/2015\/06\/HyperlinkStyling01featured.png","datePublished":"2015-06-15T04:15:22+00:00","dateModified":"2016-08-09T20:48:04+00:00","author":{"@id":"http:\/\/monkeylogic.us\/blog\/#\/schema\/person\/4d39347fa8dbfebec314b0a130b26aa1"},"description":"Making your hyperlink underlines a different color than your hyperlink text is as simple as adding two CSS rules.","breadcrumb":{"@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#primaryimage","url":"http:\/\/monkeylogic.us\/blog\/wp-content\/uploads\/2015\/06\/HyperlinkStyling01featured.png","contentUrl":"http:\/\/monkeylogic.us\/blog\/wp-content\/uploads\/2015\/06\/HyperlinkStyling01featured.png","width":570,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/monkeylogic.us\/blog\/new-hyperlink-styling\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/monkeylogic.us\/blog\/"},{"@type":"ListItem","position":2,"name":"New hyperlink styling"}]},{"@type":"WebSite","@id":"http:\/\/monkeylogic.us\/blog\/#website","url":"http:\/\/monkeylogic.us\/blog\/","name":"monkeylogic blog","description":"Out of Register","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/monkeylogic.us\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/monkeylogic.us\/blog\/#\/schema\/person\/4d39347fa8dbfebec314b0a130b26aa1","name":"Michael (the head monkey)","sameAs":["http:\/\/www.monkeylogic.us"],"url":"http:\/\/monkeylogic.us\/blog\/author\/head-monkey\/"}]}},"_links":{"self":[{"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/posts\/547","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/comments?post=547"}],"version-history":[{"count":13,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/posts\/547\/revisions"}],"predecessor-version":[{"id":897,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/posts\/547\/revisions\/897"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/media\/562"}],"wp:attachment":[{"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/media?parent=547"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/categories?post=547"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/monkeylogic.us\/blog\/wp-json\/wp\/v2\/tags?post=547"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}