2016-05-31 48 views
1

我建立了一个由水平列表组成的进度条。每个列表项都包含在:: before伪类的content属性中的svg。效果是每个列表项上方的图标出现,表示用户进度中的某个步骤。我可以将<object>元素插入伪类:: before的内容吗?

允许用户编辑网站上所有内容的颜色。当通过内容网址链接时,svgs的颜色无法编辑。但是,我想知道是否可以将svg插入到<object>标记中,然后在内容属性中包含<object>

我有一种感觉,这是不能做的,但希望别人有一些洞察力!

谢谢!

+1

不,这是不可能把HTML代码中内容属性,只有文字或图像。 – blonfu

+0

实际上,您可以在伪元素中添加元素,但这不会成为DOM的一部分,因此您无法通过DOM访问其方法,甚至也无法获取外部资源。但在你的情况下,一个重要的事情是,你实际上可以使用''('url(pathTo.svg)')直接在伪元素中加载svg图像,甚至是一些uri编码的版本(参见[here]( http://stackoverflow.com/a/37558030/3702797)获取更多信息)。 – Kaiido

回答

1

.test::after { 
 
    content: "Pseudo-elements <b>cannot contain additional DOM nodes</b>." 
 
}
<div class="test">Nope. </div>

只有文本,URI的,或其它便利值极少数被允许在“内容”属性:https://developer.mozilla.org/en-US/docs/Web/CSS/content

+0

这不是真的:http://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text/37558030#37558030 – Kaiido

+0

好的。我在此修改我的答案,“除了一个奇怪的,几乎肯定是偶然的边缘案例,只允许内容中的文本。” –

+0

不,它不是“*怪异*”,也不是“*偶然*”。你可以使用''来显示伪元素的'content' CSS属性中的图像,这意味着你也可以显示svg图像。显示HTML是源于此的黑客,但显示图像和svg完全指定。你自己检查[你的链接](https://developer.mozilla.org/en-US/docs/Web/CSS/content#Values),有比“'更接受的值。 – Kaiido

相关问题