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

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

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

这将非常方便……它可以通过Javascript完成，但使用css真的会让生活更容易:)

227463 次浏览
小开
最佳答案

不幸的是，这是不可能的。根据规范:

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

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

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

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

．.． 将导致以下输出:

& lt; a href =“# top"祝辞Back< / a>标题

小开

正如在@BoltClock的回答的评论中几乎提到的，在现代浏览器中，实际上可以使用(url())与svg的<foreignObject>元素结合在一起，将一些html标记添加到伪元素中。

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

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

  • 你不能从这个标记加载任何外部资源(没有CSS，没有图像，没有媒体等)。
  • 您无法执行脚本。
  • 因为这不是DOM的一部分，所以修改它的唯一方法是将标记作为一个数据uri传递，并在document.styleSheets中编辑这个数据uri。对于这部分，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>

小开

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

CSS为页面媒体模块生成的内容草案中的示例:

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


.runner {
position: running(heading);
}

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

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

小开

这可能是不可能的，因为XSS太容易了。此外，当前可用的HTML杀毒程序不会禁止content属性。

(绝对不是这里最好的答案，但我只是想分享一个见解，而不是“根据spec…”“)

小开

如果您能够在页面的其他地方添加HTML，您可以将其重新定位到CSS内容显示的区域。

所以你添加CSS内容:

   .cssClass::after {
content: "Content and Words and Things";
color: #0000EE;
}

我添加了蓝色超链接，让它看起来像一个链接。

然后添加一个href，该href在标记之间没有文本，其中有一个可以引用的id或类。它可以在任何地方，只要它在同一页上。

<a id="link" href="#"></a>

然后将链接放置在你想要的内容上:

a#link{
height: 20px;
width: 100%;
left: 0;
top: 5%;
position: absolute;
}

提交答案