Styling Links With CSS The Right Way

Styling Links With CSS The Right Way

Today I got stuck while figuring out while styling links for a theme. I was trying to figure out how to style the regular links, visited links and hovered links. But the catch is that if you have a named anchor within a heading, it gets text-decoration and link color which is not desirable. For example this code:

<h1>Business <a name="hello">systems that solve</a> your entrepreneurial challenges</h1>

Looks like this:

The problem is—it’s a named anchor. There’s no reason it should stand out for any accessibility reasons. Then the frustration began. anchors, links, visited, hovered—ideally you should be able to target each of these with CSS. And here’s the selector discovery.

A few points:

  • a:—The anchor tag
  • :link—Elements that have an href attribute
  • :visited—Visited style.
  • :hover—Hover style of elements with an href attribute

Here’s the catch—Now you may think why not use :link:visited? Apparently it doesn’t work. :link is implied when you use :visited because obviously you can’t visit elements that do not have an href attribute. But you can do :visited:hover because it does make sense. Anyways, it you come across this issue here’s the code.

/* elements with href attribute when hovered. Keep the transition to see the states it goes through upon hovering*/
:link { color: #c00; transition: all 0.5s linear; }

/* elements with href attribute when visited Note: :visited means links that have been visited. Obviously you can't visit links without href attribute */
:visited {color: #080}
/* elements with href attribute when hovered */
:link:hover { color: #fc0; }
/* visited elements with href attribute when hovered */
:visited:hover { color: #fc0; }

Generally you’ll never need :visited:hover.

References: How To Remember The Order of Selectors
Thanks to @justintadlock

Posted In:

UX UI Front-end Development, Code Snippets

2 Comments

  1. My first question would be: why are you using a named anchor? It might be a good thing to check on if you want to make sure all styling options are covered, but almost everyone uses IDs rather than named anchors for links within a page. So if you just made that `Business systems that solve your entrepreneurial challenges`, you wouldn’t have to worry about inadvertent styles.

    Reply
    1. Hi Sallie, When designing a theme you have to consider all use-cases. Named anchors is just one of them. And that’s what I could think of for this post. Semantically targeting :link instead of targeting anchors makes more sense to me. There also will be cases when you’d use a theme and don’t have the luxury of changing all named anchors to ones with IDs and doing a mass search-and-replace of links etc. So I wanted things covered with a minimal impact.

      PS: Received a sensible blog comment in ages. Time to disable moderation. Waiting to see if spam still comes through.

      Reply

Comment on Styling Links With CSS The Right Way

Your email address will not be published. Required fields are marked *