只是想知道是否有可能以某种方式使CSS内容属性插入html代码，而不是字符串在:之前或:之后的元素，如:
.header:before{
content: '<a href="#top">Back</a>';
}
这将非常方便……它可以通过Javascript完成，但使用css真的会让生活更容易:)
当前回答
这可能是不可能的，因为XSS太容易了。此外，当前可用的HTML杀毒器不会禁止内容属性。
(绝对不是这里最好的答案，但我只是想分享一个见解，而不是“根据规格……””)
其他回答
这可能是不可能的，因为XSS太容易了。此外，当前可用的HTML杀毒器不会禁止内容属性。
(绝对不是这里最好的答案，但我只是想分享一个见解，而不是“根据规格……””)
在CSS3页面媒体中，可以使用position: running()和content: element()。
示例来自CSS生成内容的页面媒体模块草案:
@top-center {
content: element(heading);
}
.runner {
position: running(heading);
}
.runner可以是任何元素，而heading是槽的任意名称。
编辑:澄清一下，基本上没有浏览器支持，所以这主要是为了供将来参考/除了已经给出的“实际答案”。
如果您能够在页面的其他地方添加HTML，您可以将其重新定位到CSS内容显示的区域。
所以你添加CSS内容:
.cssClass::after {
content: "Content and Words and Things";
color: #0000EE;
}
我添加了蓝色超链接，让它看起来像一个链接。
然后添加一个href，该href在标记之间没有文本，其中有一个可以引用的id或类。它可以在任何地方，只要它在同一页上。
<a id="link" href="#"></a>
然后将链接放置在你想要的内容上:
a#link{
height: 20px;
width: 100%;
left: 0;
top: 5%;
position: absolute;
}
正如在@BoltClock回答的评论中几乎提到的，在现代浏览器中，实际上可以使用(url())结合svg的<foreignObject>元素向伪元素添加一些html标记。
您既可以指定指向实际svg文件的URL，也可以使用dataURI版本创建它(data:image/svg+xml;charset=utf8， + encodeURIComponent(yourSvgMarkup))
但请注意，这主要是一个黑客，有很多限制:
You can not load any external resources from this markup (no CSS, no images, no media etc.). You can not execute script. Since this won't be part of the DOM, the only way to alter it, is to pass the markup as a dataURI, and edit this dataURI in document.styleSheets. for this part, DOMParser and XMLSerializer may help. While the same operation allows us to load url-encoded media in <img> tags, this won't work in pseudo-elements (at least as of today, I don't know if it is specified anywhere that it shouldn't, so it may be a not-yet implemented feature).
下面是一个伪元素中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>
不幸的是，这是不可能的。根据说明书:
生成的内容不会改变文档树。特别是，它不会被反馈给文档语言处理器(例如，用于重新解析)。
换句话说，对于字符串值，这意味着该值总是按字面来处理。无论使用哪种文档语言，它都不会被解释为标记。
作为一个例子，使用给定的CSS和以下HTML:
<h1 class="header">Title</h1>
．.． 将导致以下输出:
<a href=“#top”>返回</a>标题
