使用CSS内容创建链接

Question

我想用CSS中的可点击链接替换文本。

到目前为止，我得到：

.myclass {
    visibility: hidden;
}

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

这就是我得到的：

My page: myawesomepage

这就是我要的：

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

我错了什么？

Answer 1

content必须是一个字符串，所以：

.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>

但这不会创建链接，只是文本。

Answer 2

您不能将html添加到css中的内容。

来自spec：

生成的内容不会更改文档树。特别是，它不被反馈给文档语言处理器（例如，用于重新分析）。

这意味着代码：

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

将呈现以下输出：

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

您可以从article获取有关使用内容的更多信息。