html - CSS 内容属性 : is it possible to insert HTML instead of Text?

Question

只是想知道是否有可能以某种方式使 CSS content 属性在 :before 或 :after 元素上插入 html 代码而不是字符串，例如:

.header:before{
  content: '<a href="#top">Back</a>';
}

这会非常方便...它可以通过 Javascript 完成，但为此使用 css 确实会让生活更轻松 :)

Answer 1

不幸的是，这是不可能的。根据 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).

换句话说，对于字符串值，这意味着该值始终按字面意思处理。无论使用何种文档语言，它都不会被解释为标记。

例如，将给定的 CSS 与以下 HTML 结合使用:

<h1 class="header">Title</h1>

... 将产生以下输出:

返回标题