281

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

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

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

4

5 回答 5

226

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

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

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

例如，将给定的 CSS 与以下 HTML 一起使用：

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

...将导致以下输出：

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

于 2010-12-22T00:10:01.683 回答
63

正如@BoltClock 答案的评论中几乎指出的那样，在现代浏览器url()中，您实际上可以使用 ( ) 与 svg 的元素相结合的方式向伪元素添加一些 html 标记<foreignObject>。

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

但请注意，这主要是一种 hack，并且有很多限制：

  • 您不能从此标记加载任何外部资源（没有 CSS、没有图像、没有媒体等）。
  • 你不能执行脚本。
  • 由于这不是 DOM 的一部分，因此更改它的唯一方法是将标记作为 dataURI 传递，并在document.styleSheets. 对于这部分，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>

于 2016-06-01T01:24:51.567 回答
9

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

来自CSS Generated Content for Paged Media Module草稿的示例：

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

.runner { 
  position: running(heading);
}

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

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

于 2017-11-23T19:09:31.197 回答
1

这是不可能的，因为 XSS 很容易。此外，当前可用的 HTML 清理程序不允许使用content属性。

（绝对不是这里最好的答案，但我只是想分享除“根据规范......”之外的见解）

于 2020-07-04T13:25:40.130 回答
0

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

所以你添加你的 CSS 内容：

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

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

然后，您在标签之间添加一个没有文本的 href，并带有您可以引用的 id 或类。只要它在同一页面上，它就可以在任何地方。

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

然后将链接放在您想要的内容上：

a#link{
    height: 20px;
    width: 100%;
    left: 0;
    top: 5%;
    position: absolute;
}
于 2022-02-17T00:20:31.257 回答