＆lt; a href =“＃top”＆gt;返回＆lt; / a＆gt;标题

Question

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

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

这将非常方便......可以通过Javascript完成，但使用css可以让生活更轻松：）

Answer 1

不幸的是，这是不可能的。根据{{3}}：

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

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

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

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

...将产生以下输出：

＆lt; a href =“＃top”＆gt;返回＆lt; / a＆gt;标题

Answer 2

正如@BoltClock回答的评论中所提到的那样，在modern browsers中，你可以使用（url()）结合svg的<foreignObject>元素向伪元素添加一些html标记

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

但请注意，这主要是一个黑客攻击，并且有很多限制：

您无法从此标记加载任何外部资源（无CSS，无图像，无媒体等）。
您无法执行脚本。
由于这不是DOM的一部分，因此改变它的唯一方法是将标记作为dataURI传递，并在document.styleSheets中编辑此dataURI。对于此部分，DOMParser和XMLSerializer可以help。
虽然相同的操作允许我们在<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 Generated Content for Paged Media Module草稿中的示例：

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

.runner { 
  position: running(heading);
}

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

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

Answer 4

不可能，因为XSS太容易了。另外，当前可用的HTML清理程序不会禁止使用content属性。

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

CSS内容属性：是否可以插入HTML而不是Text？

4 个答案:

＆lt; a href =“＃top”＆gt;返回＆lt; / a＆gt;标题