为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

跃然一笑 2019-09-21 15:25:56

只是想知道是否有可能使CSS content属性插入html代码而不是字符串:before或:after类似这样的元素:


.header:before{

  content: '<a href="#top">Back</a>';

}

这将非常方便...可以通过Javascript完成,但是使用CSS确实可以使生活更轻松:)


查看完整描述

3 回答

?
芜湖不芜

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


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


换句话说,对于字符串值,这意味着始终按字面意义对待该值。无论使用哪种文档语言,都永远不会将其解释为标记。


例如,将给定的CSS与以下HTML结合使用:


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

...将产生以下输出:


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


查看完整回答
反对 回复 2019-09-21
?
慕容森

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


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


但是请注意,这主要是黑客行为,并且有很多限制:


您不能从此标记加载任何外部资源(没有CSS,没有图像,没有媒体等)。

您无法执行脚本。

由于这不会成为DOM的一部分,因此更改它的唯一方法是将标记作为dataURI传递,并在中编辑此dataURI document.styleSheets。对于这部分,DOMParser并且XMLSerializer可能帮助。

虽然相同的操作允许我们将url编码的媒体加载到<img>标签中,但是这不适用于伪元素(至少从今天开始,我不知道是否在不应该指定的地方指定了它,因此可能是尚未实现的功能)。

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


查看完整回答
反对 回复 2019-09-21
?
呼唤远方

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


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


@top-center {

  content: element(heading); 

}


.runner { 

  position: running(heading);

}

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


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


查看完整回答
反对 回复 2019-09-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信