Show Link URL from HREF Attribute Using CSS

We can use CSS to display the URL of a link after the link. For this we don’t need to modify HTML as all work is done by CSS.

This is the complete CSS to do this:

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

    // Style URL
    font-style:italic;
    color:blue;
}

The CSS feature :after allows us to add any content after an element, so to show URLs after links we are using:

a:after{

}

As for the URL itself, we will get it from the link’s href attribute. This is done using a method called attr():

 attr(href)

You can access other attributes (ex. title) this way.

Finally, you can also style the displayed content using CSS just like any other element:

a:after{

    font-style:italic;
    color:blue;
}