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

正如对@ BoltClock的答案的评论中所提到的,在现代浏览器中,您实际上可以使用(url())结合svg的<foreignObject>元素将一些html标记添加到伪元素.

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

但请注意,它主要是一个黑客,并且有很多限制:

• 您无法从此标记加载任何外部资源(没有CSS,没有图像,没有媒体等).
• 你不能执行脚本.
• 由于这不是DOM的一部分,因此改变它的唯一方法是将标记作为dataURI传递,并在其中编辑此dataURI document.styleSheets.对于这部分,DOMParser并且XMLSerializer可能帮助.
• 虽然相同的操作允许我们在<img>标签中加载url编码的媒体,但这在伪元素中不起作用(至少在今天,我不知道它是否在任何地方指定它不应该,所以它可能是一个尚未实现的功能).

现在,在一个伪元素中的一些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>

Answer 3

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

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

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

.runner { 
  position: running(heading);
}

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

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