【问题标题】：CSS content property: is it possible to insert HTML instead of Text?CSS 内容属性：是否可以插入 HTML 而不是文本？
【发布时间】：2011-05-29 03:39:42
【问题描述】：

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

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

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

【问题讨论】：

@Kaiido OMG...不是，没有检查问题的日期，我参考了您的回答...真的很抱歉，将删除这两个 cmets :)

标签： html css pseudo-element css-content

【解决方案1】：

很遗憾，这是不可能的。根据spec：

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

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

例如，使用给定的 CSS 和以下 HTML：

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

... 将产生以下输出：

返回标题

【讨论】：

同意，但如果您认为它已经支持具有 url 属性的图像，那么从这个角度来看，添加链接不会有太大不同。
@ludicco：那是因为图像本身不是 DOM 元素（不包括 <img>），它们只是被绘制到现有元素上，所以通过应用背景或列表图像你不是真正修改 DOM。
明白了，谢谢，所以我想我得把这个想法传递给js，干杯
@ludicco：好问题。甚至我都在搜索所以希望这是可能的。
是否支持 svgs，我刚刚发现 :)

【解决方案2】：

正如 cmets 对 @BoltClock 的回答几乎指出的那样，在 modern browsers 中，您实际上可以使用 (url()) 结合 svg 的 <foreignObject> 元素为伪元素添加一些 html 标记。

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

但请注意，这主要是一种 hack，并且有很多限制：

您无法从此标记加载任何外部资源（无 CSS、无图片、无媒体等）。
您无法执行脚本。
由于这不会是 DOM 的一部分，因此更改它的唯一方法是将标记作为 dataURI 传递，并在 document.styleSheets 中编辑此 dataURI。对于这部分，DOMParser 和 XMLSerializer 可以是 help。
虽然相同的操作允许我们在<img> 标签中加载 url 编码的媒体，但这在伪元素中不起作用（至少从今天开始，我不知道它是否在任何地方指定了它应该't，所以它可能是一个尚未实现的功能）。

现在，一个伪元素中一些 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');
}

&lt;p id="log"&gt;hi&lt;/p&gt;

【讨论】：

我遇到了你的答案，这是我自己的一些问题的解决方案。你能解释一下如何格式化指向文件的 URL 吗？我试过url('/relativePathToMySvg/mySvg.svg')，但没用
@Frank，根据规范，使用相对路径将相对于您的 css 文件的路径，即，如果您的 css 文件位于 /root/css/yourFile.css，那么像 yourFile.svg 这样的相对 funcIRI 将指向/root/css/yourFile.svg/。但是，我想我记得一些早期的 UA 有一个错误，并使其与文档的 baseURI 相关。所以最安全的方法就是使用绝对路径。
@BoltClock，真的吗？我真的很抱歉。我由另一个人提出了这个 6 岁的问题，觉得我必须将它作为更新发布，但也许我应该更清楚你的答案很好，而且 6 年前肯定是正确的？或者，如果您有一些可以作为标题的好措辞，请随时编辑我的答案。
不错。我用过：content: url('../../images/como-funciona.svg');，效果很好
这是一个较早的帖子，其中有我的答案，对主题进行了更深入的探讨：is-it-possible-to-display-an-html-document-or-html-fragment-at-css-content

【解决方案3】：

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

CSS Generated Content for Paged Media Module 草案中的示例：

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

.runner { 
  position: running(heading);
}

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

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

【讨论】：

嘿，你能再解释一下吗。我对您的理论感兴趣，但似乎无法执行。我将如何使用这种方法或 div 包含一个锚标记。
问题是目前基本上没有浏览器支持，但是专门的HTML渲染器按照规范实现了它。下一个不太好的消息是似乎没有一个好的开源实现。大多数是像princexml.com这样的SaaS产品。

【解决方案4】：

这是不可能的，因为 XSS 很容易。此外，当前可用的 HTML sanitizer 不会禁止 content 属性。

（绝对不是这里最好的答案，但我只是想分享“根据规范......”以外的见解）

【讨论】：