只是想知道是否有可能以某种方式使 CSS content
属性在 :before
或 :after
上插入 html 代码而不是字符串,例如:
.header:before{
content: '<a href="#top">Back</a>';
}
这将非常方便...可以通过 Javascript 完成,但使用 css 确实会让生活更轻松 :)
正如@BoltClock 答案的评论中几乎指出的那样,在 modern browsers 中,您实际上可以使用 (url()
) 与 svg 的 <foreignObject>
元素相结合来为伪元素添加一些 html 标记。
您可以指定一个指向实际 svg 文件的 URL,也可以使用 dataURI 版本 (data:image/svg+xml; charset=utf8, + encodeURIComponent(yourSvgMarkup)
) 创建它
但请注意,这主要是一种 hack,并且有很多限制:
您不能从此标记加载任何外部资源(没有 CSS、没有图像、没有媒体等)。
你不能执行脚本。
由于这不是 DOM 的一部分,因此更改它的唯一方法是将标记作为 dataURI 传递,并在 document.styleSheets 中编辑此 dataURI。对于这一部分,DOMParser 和 XMLSerializer 可能会有所帮助。
虽然相同的操作允许我们在 标签中加载 url 编码的媒体,但这在伪元素中不起作用(至少到今天为止,我不知道它是否在任何不应该指定的地方指定,所以它可能是一个尚未实现的功能)。
现在,一个伪元素中一些 html 标记的小演示:
/* ** 原始 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'); }
嗨
url('/relativePathToMySvg/mySvg.svg')
,但没有成功
/root/css/yourFile.css
中,那么像 yourFile.svg
这样的相对 funcIRI 将指向 /root/css/yourFile.svg/
。但是,我想我记得一些早期的 UA 有一个错误,并使其与文档的 baseURI 相关。所以最安全的方法就是使用绝对路径。
content: url('../../images/como-funciona.svg');
,它工作正常
在 CSS3 分页媒体中,这可以使用 position: running()
和 content: element()
。
CSS Generated Content for Paged Media Module 草稿中的示例:
@top-center {
content: element(heading);
}
.runner {
position: running(heading);
}
.runner 可以是任何元素,heading
是插槽的任意名称。
编辑:澄清一下,基本上没有浏览器支持,所以这主要是为了供将来参考/除了已经给出的“实用答案”之外。
这是不可能的,因为 XSS 很容易。此外,当前可用的 HTML 清理程序不允许使用 content
属性。
(绝对不是这里最好的答案,但我只是想分享除“根据规范......”之外的见解)
如果您能够在页面的其他位置添加 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;
}
不定期副业成功案例分享
url
属性的图像,那么从这个角度来看,添加链接不会有太大不同。<img>
),它们只是被绘制到现有元素上,因此通过应用背景或列表图像,您并没有真正修改 DOM。