Ant*_*nAL 7 html css pseudo-class
我有以下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>
:之前不会出现图像,但它适用于任何div.
为什么？
更新:我在W3C中找到了这个解释:
注意.此规范未完全定义:替换元素(例如HTML中的IMG)之前和之后的交互.这将在未来的规范中更详细地定义.
更新2:
我忘了提 - 我需要用CSS可视化图像的"alt"属性.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}
考虑到您引用的规范，我想在这种情况下您必须将图像包装在一个元素中并应用:before到该元素上。
编辑：
考虑到该alt属性用于替代文本，并且基本上应该提供与图像相同的信息，这是否意味着您正在为用户复制信息？
将要显示的信息放入title周围元素的属性中并显示该信息怎么样？
例子：
<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>