Learn How To Display URL After Link With CSS

I've recently been asked if there is an easy way to display the URL of a link after the link. For example in a list of items you would want to display the title and then display the URL after the title. This was noticed on my page I display a list of websites you can submit your web related articles to increase awareness. On this page I display 60+ websites which you can submit your articles, in this list I just display the title of the website which has a link to the website, but I have been asked if it's easy enough to display the list with the URLs after the website title. The answer is...Yes it is very easy, I can actually do this just by using CSS. In this tutorial we will learn how we can display the URL of a link just by using CSS.

#The HTML

First we start off looking at how the HTML is going to look. This example is very simple it's just a list of links with text inside the link.

<ul>
	<li><a href="http://www.fuelyourcreativity.com/">FuelYourCreativity</a></li>
	<li><a href="http://www.knowtebook.com/">KnowTeBook</a></li>
	<li><a href="http://devsnippets.com/">DevSnippets</a> <em>hasn't been updated since Mar 2011</em></li>
	<li><a href="http://woork.blogspot.com/2009/02/add-design-news-on-woork.html">Woork</a></li>
	<li><a href="http://kailoon.com/web-design-news/#reply">Kailoon</a></li>
        <li><a href="http://www.instantshift.com/user-submitted-news/">InstantShift</a></li>
	<li><a href="http://www.hongkiat.com/blog/submit-news-tips/">Hongkiat</a></li>
	<li><a href="http://speckyboy.com/designnews/design-news-submission-form/">Speckyboy</a></li>
	<li><a href="http://design-newz.com/submit-newz/">Design-Newz</a></li>
</ul>

#The CSS

The CSS is going to do all the work for us we don't need to change the HTML at all to display the link. In a previous tutorial we learnt how we can use the CSS feature :before and :after to create CSS Tooltips. We are going to use the : after selector so that we can display the URL after the title of the website. The :after allows us to add content after the selected element, so for this example we are going to use.

a:after{
     //styles go here
}

But how do we add the URL of the link in the :after property. In CSS you can access attributes of the selected element, the href attribute is on the a tag and it is the link we want to display. All we have to do is grab the contents of the href attribute and display this inside the a:after. This is simply done by using a method inside CSS called attr().

attr(href)

Now we have the contents of the href we can add this inside the styles for the :after and make this be the contents of the after element.

a:after{
     content: ' ' attr(href);

     // Style the content like you normally would to any element
     font-style:italic;
     color:#333;
}

What this does is creates a new element which go directly after any a tag on the page and inside this new element we are adding content which will be a space followed by the href attribute of the a tag, which is the link we want to display. Now we can style this just like any other element by changing the colour of the font and changing the style to italic.