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;
}