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

html CSS

十三西门

2020-03-26

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

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

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

第3760篇《CSS内容属性：是否可以插入HTML而不是Text？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
JimJim 2020.03.26

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

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

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

.runner { 
  position: running(heading);
}

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

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

Gil伽罗小宇宙 2020.03.26

不幸的是，这是不可能的。根据规格：

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

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

As an example, using the given CSS with the following HTML:

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

... will result in the following output:

<a href="#top">Back</a>Title

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android