Using CSS content to create a link

Question

I want to replace a text with a clickable link in CSS.

So far I get:

.myclass {
    visibility: hidden;
}

.myclass:before {
    content: 'My page: ' url(http://www.myawesomepage.com) 'myawesomepage';
    visibility:visible;
}

This is what I got:

My page: myawesomepage

This is what I want:

My page: <a href="http://www.myawesomepage.com">myawesomepage</a>

What did I wrong?

Answer 1

content must be a string so:

.myclass:before {
    content: 'My page: <a href="http://www.myawesomepage.com">myawesomepage</a>';
    visibility:visible;
}

    .myclass:before {
        content: 'My page: <a href="http://www.myawesomepage.com">myawesomepage</a>';
        visibility:visible;
    }

<div class="myclass">Hello</div>

But this will not create a link, just text.