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

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

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

不幸的是，这是不可能的。根据规格：

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

换句话说，对于字符串值，这意味着始终按字面意义对待该值。无论使用哪种文档语言，都永远不会将其解释为标记。

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

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

...将产生以下输出：

<a href="#top">返回</a>标题

正如@BoltClock答案的注释中几乎指出的那样，在现代浏览器中，您实际上可以使用（url()）结合svg的<foreignObject>元素在伪元素中添加一些html标记。

您可以指定指向实际svg文件的URL，也可以使用dataURI版本（data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)）创建该URL

但是请注意，这主要是黑客行为，并且有很多限制：

• 您不能从此标记加载任何外部资源（没有CSS，没有图像，没有媒体等）。
• 您无法执行脚本。
• 由于这不会成为DOM的一部分，因此更改它的唯一方法是将标记作为dataURI传递，并在中编辑此dataURI document.styleSheets。对于这部分，DOMParser和XMLSerializer5月份的帮助。
• 尽管相同的操作允许我们将url编码的媒体加载到<img>标签中，但这不适用于伪元素（至少从今天开始，我不知道是否在不应该指定的地​​方指定了它，因此可能是尚未实现的功能）。

现在，在伪元素中的一些html标记的小演示：

/* 
**  original svg code :
*
*<svg width="200" height="60"
*     xmlns="http://www.w3.org/2000/svg">
*
* <foreignObject width="100%" height="100%" x="0" y="0">
*	<div xmlns="http://www.w3.org/1999/xhtml" style="color: blue">
*		I am <pre>HTML</pre>
*	</div>
* </foreignObject>
*</svg>
*
*/

#log::after {
  content: url('data:image/svg+xml;%20charset=utf8,%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2260%22%20width%3D%22200%22%3E%0A%0A%20%20%3CforeignObject%20y%3D%220%22%20x%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%0A%09%3Cdiv%20style%3D%22color%3A%20blue%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%09%09I%20am%20%3Cpre%3EHTML%3C%2Fpre%3E%0A%09%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E');
}

<p id="log">hi</p>

在CSS3分页媒体中，可以使用position: running()和来实现content: element()。

来自CSS生成的分页媒体模块草稿内容的示例：

@top-center {
  content: element(heading); 
}

.runner { 
  position: running(heading);
}

.runner可以是任何元素，并且heading是插槽的任意名称。

编辑：澄清一下，基本上没有浏览器支持，所以这主要是为了将来参考/除了已经给出的“实用答案”。