使用 CSS 内容创建 link

Question

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

到目前为止我得到：

.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

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

来自 spec：

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

这意味着代码：

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

获得有关内容使用的更多信息

Answer 2

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>

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

使用 CSS 内容创建 link

Using CSS content to create a link

css

separation-of-concerns