使用CSS訪問樣式自定義屬性

Question

我不知道這是否可行，但任何幫助將不勝感激。

我在我的HTML的代碼：

<img src="mountains.jpeg" class="green inline-image" data-caption="A picture of mountains!"> 

其中data-caption是一個自定義屬性。

我想做點什麼like this。

正如您所見，data-caption必須位於圖像正下方的一個小框中，其寬度與圖像完全相同。我不知道這是否可行，所以你可以推薦一種替代方法嗎？

我試圖做這樣的事情：

<img src="mountains.jpeg" class="green inline-image"> 
<div class="photo-caption"> 
    A picture of mountains! 
</div> 

CSS：

.inline-image { 
    width:30%; 
} 

.photo-caption { 
    width:30%; 
    background-color:blue; 
} 

這工作，但我寧願沒有作出新的<div>每一個標題。我寧願將它放在<img>標籤中。

非常感謝！

Answer 1

是的它可以使用css content但在你的情況下的問題是你在img元素上使用它，它不會在某些browsers上工作。

我建議的另一種方法是將img元素插入div中，並在那裏具有該自定義屬性。

HTML：

<div class="img-block" data-caption="A picture of mountains!"> 
    <img src="mountains.jpeg" class="green inline-image" > 
</div> 

CSS

.img-block:after { 
    content: attr(data-caption); 
} 

Reference