2016-05-31 59 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

相關問題