CSS内容属性:是否可以插入HTML而不是文本?

只是想知道是否有可能以某种方式使CSS content属性插入HTML代码而不是string:before:after的元素如:

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

这将是相当方便的…它可以通过Javascript来完成,但使用CSS这将真正使生活更容易:)

不幸的是,这是不可能的。 根据规格 :

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

换句话说,对于string值,这意味着该值总是按照字面意思来处理。 无论使用哪种文档语言,它都不会被解释为标记。

作为一个例子,使用给定的CSS和下面的HTML:

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

…将导致以下输出:

<a href="#top">返回</a>标题

正如在@ BoltClock的回答中所指出的那样,在现代浏览器中 ,您实际上可以使用( url() )与svg的<foreignObject>元素结合来为伪元素添加一些html标记。

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

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

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

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