：之前的伪类不工作的图像 [英] :before pseudo-class does't works with images
问题描述
我有以下HTML：
<！DOCTYPE html&
< html>
< head>
< meta charset =UTF-8>
< title>：before伪类和图像< / title>
< style type =text / cssmedia =screen>
img {
display：block;
width：640pt;
}
img：before {
content：Test;
}
< / style>
< / head>
< body>
< img src =http://andreygromov.name/picture/flower/flower4.jpgalt =Вазасцветами/>
< / body>
< / html>
：之前不会出现图片，但它适用于任何div。
为什么？
更新：
我在W3C中发现了这个解释：
注意。本规范没有完全定义：被替换的元素（例如HTML中的IMG）之前和之后的交互。这将在未来的规范中更详细地定义。
更新2： / p>
我忘了提及 - 我需要用CSS可视化图像的alt属性。
img：before {
display：block;
content：attr（alt）;
background-color：＃333;
/ *等* /
}
考虑到你引用的规范，我想这是一种情况，你必须将图像包装在一个元素，并应用： c>之前。
编辑：
考虑到 alt 属性用于替代文本，基本上应该提供与图像相同的信息，这不是说你正在为用户复制信息吗？
如何将要显示的信息显示在周围元素的 title 属性中并显示？
示例：
< style type =text / cssmedia = >
.image：before {
content：attr（title）;
}
.image img {
display：block;
width：640pt;
}
< / style>
< div class =imagetitle =信息here>< img ...>< / div>
I have following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:before pseudo-class and images</title>
<style type="text/css" media="screen">
img {
display: block;
width: 640pt;
}
img:before {
content: "Test";
}
</style>
</head>
<body>
<img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" />
</body>
</html>
:before will not appear for image, but it does for any div.
Why ?
Update: I found this explanation in W3C:
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
Update 2:
I forget to mention - i need to visualize "alt" attribute of image with CSS.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}
Considering the specification you quoted, I guess this is a case where you have to wrap the image in an element and apply :before on that.
EDIT:
Considering, that the alt attribute is for alternative text and basically should confer the same information as the image does, wouldn't that mean you are duplicating the information for the user?
How about putting the information you want to display in the title attribute of the surrounding element and displaying that?
Example:
<style type="text/css" media="screen">
.image:before {
content: attr(title);
}
.image img {
display: block;
width: 640pt;
}
</style>
<div class="image" title="Information here"><img ... ></div>
这篇关于：之前的伪类不工作的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
