CSS content Property

<!DOCTYPE html>
<html>
<head>
<style>
a:after {
    content: " (" attr(href) ")";
}
</style>
</head>
<body>

<p><a href="https://www.w3schools.com">W3Schools</a> contains free tutorials and references.</p>
<p><b>Note:</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>

</body>
</html>

I am unable to understand this

How come the whole page is loading after the click on anchor text.

What do you expect to happen?

1 Like

can you explain me what is this actually doing:

content: " (" attr(href) ")";

It is placing the URL from the href attribute after the anchor text in the <a> element.

2 Likes

https://codepen.io/codeispoetry/pen/RxWzLe

Now the page is not loading as it was loading in w3schools page.

I think I got confused by the page loading on clicking the anchor text.

Are you talking about when you clink the link in codepen?

If so its probably because links inside codepen open inside the editor window which is basically an embedded iframe and some sites won’t let you run from within an iframe. You add the target attribute to open the page in a new window although you wouldn’t do this for normal pages.

<a href="https://www.w3schools.com" target="_blank">W3Schools</a>

1 Like

Yes. I think I misinterpreted the concept because I got confused by the loading of the whole page after the click in w3school.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.