CSS内容属性：是否可以插入HTML而不是Text？

Question

只是想知道是否有可能使CSS content属性插入html代码而不是字符串:before或:after类似这样的元素：

.header:before{

  content: '<a href="#top">Back</a>';

}

这将非常方便...可以通过Javascript完成，但是使用CSS确实可以使生活更轻松:)

Answer 1

不幸的是，这是不可能的。根据规格：生成的内容不会更改文档树。特别是，它不会反馈给文档语言处理器（例如，用于重新解析）。换句话说，对于字符串值，这意味着始终按字面意义对待该值。无论使用哪种文档语言，都永远不会将其解释为标记。例如，将给定的CSS与以下HTML结合使用：<h1 class="header">Title</h1>...将产生以下输出：<a href="#top">返回</a>标题

Answer 2

在CSS3分页媒体中，可以使用position: running()和来实现content: element()。来自CSS生成的分页媒体模块草稿内容的示例：@top-center {&nbsp; content: element(heading);&nbsp;}.runner {&nbsp;&nbsp; position: running(heading);}.runner可以是任何元素，并且heading是插槽的任意名称。编辑：澄清一下，基本上没有浏览器支持，所以这主要是为了将来参考/除了已经给出的“实用答案”。