html - 如何获取带有内容的图像属性？

Question

我可以从标签中获取属性，<a>但我无法从<img>. 我能做些什么 ？

演示

HTML

<img src="http://placehold.it/50x50" alt="Some alt"/>
<br/>
<a href="#" alt="Some alt">test link</a>

CSS

img:after{
    content:attr(alt);
    margin-left:10px;
}
a:after{
    content:attr(alt);
    margin-left:10px;
}

Answer 1

根据@Passerby 评论，CSS 是不可能的：

根据 MDN，::after “匹配选定元素的虚拟最后一个子元素”，并且因为不能有子元素，所以它不会有任何 ::after 或 ::before。同样适用于输入。

所以我写了这个 JQuery 代码：

演示

var $imageAlt = '<span class="after">'+$("#image").attr("alt")+'</span>';
$("#image").after($imageAlt);