CSS 内容属性：是否可以插入 HTML 而不是文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4505093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS content property: is it possible to insert HTML instead of Text?
提问by zanona
Just wondering if it's possible somehow to make the CSS contentproperty insert html code instead string on :beforeor :afteran element like:
只是想知道是否有可能以某种方式使 CSScontent属性插入 html 代码而不是字符串:before或:after类似的元素：
.header:before{
content: '<a href="#top">Back</a>';
}
this would be quite handy...It could be done through Javascript but using css for this would really make lives easier :)
这将非常方便......它可以通过 Javascript 完成，但使用 css 确实会让生活更轻松:)
采纳答案by BoltClock
Unfortunately, this is not possible. Per the 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).
生成的内容不会改变文档树。特别是，它不会反馈给文档语言处理器（例如，用于重新解析）。
In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.
换句话说，对于字符串值，这意味着该值始终按字面处理。无论使用何种文档语言，它永远不会被解释为标记。
As an example, using the given CSS with the following HTML:
例如，将给定的 CSS 与以下 HTML 一起使用：
<h1 class="header">Title</h1>
... will result in the following output:
...将导致以下输出：
<a href="#top">Back</a>Title
<a href="#top">返回</a>标题
回答by Kaiido
As almost noted in comments to @BoltClock's answer, in modern browsers, you can actually add some html markup to pseudo-elements using the (url()) in combination with svg's <foreignObject>element.
正如对@BoltClock 的回答的评论中几乎指出的那样，在现代浏览器中，您实际上可以使用 ( url()) 结合 svg 的<foreignObject>元素向伪元素添加一些 html 标记。
You can either specify an URL pointing to an actual svg file, or create it with a dataURI version (data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))
您可以指定指向实际 svg 文件的 URL，也可以使用 dataURI 版本 ( data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup))
But note that it is mostly a hack and that there are a lotof limitations :
但请注意，这主要是一种 hack 并且有很多限制：
- You can not load any externalresources 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,DOMParserandXMLSerializermay 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).
- 您不能从此标记加载任何外部资源（无 CSS、无图像、无媒体等）。
- 您无法执行脚本。
- 由于这不是 DOM 的一部分，因此更改它的唯一方法是将标记作为 dataURI 传递，并在
document.styleSheets. 对于这部分，DOMParser和XMLSerializer5月份的帮助。 - 虽然相同的操作允许我们在
<img>标签中加载 url 编码的媒体，但这在伪元素中不起作用（至少在今天，我不知道它是否在任何不应该的地方指定，所以它可能是一个尚未实现的功能）。
Now, a small demo of some html markup in a pseudo element :
现在，一个伪元素中一些 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>回答by sol
In CSS3 paged media this is possible using position: running()and content: element().
在 CSS3 分页媒体中，这可以使用position: running()和content: element()。
Example from the CSS Generated Content for Paged Media Moduledraft:
@top-center {
content: element(heading);
}
.runner {
position: running(heading);
}
.runner can be any element and headingis an arbitrary name for the slot.
.runner 可以是任何元素，并且heading是插槽的任意名称。
EDIT:to clarify, there is basically no browser support so this was mostly meant to be for future reference/in addition to the 'practical answers' given already.
编辑：澄清一下，基本上没有浏览器支持，所以这主要是为了将来参考/除了已经给出的“实用答案”。
