CSS add link arrow using :after without underline

April 11, 2012 CSS Snippet

This little snippet will show how to add an right double arrow (») to every link on the page. It's a little bit tricky to use special characters as :after content. Instead of using the standard escaped encoding (like ») you need to use the unicode hex value (like "\00bb"). You'll find the correct unicode hex values at http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references.

In order to prevent the arrow to be underlined, position: absolute; is added to the a:after style. If you want it underlined, just remove this.

If you want to combine :after and :hover you must do it in this particular order a:hover:after, the other way around won't work.

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

/* Lets add an arrow after each link */
a:after {
    position: absolute; /* Prevent underline of arrow */
    padding-left:2px; /* Add a little space between text and arrow */
    content: "\00bb"; /* Unicode hex for &raquo; */
}

CSS add link arrow using :after without underline

Related posts: