У меня следующий 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 не отображается для изображения, но отображается для любого div.
Почему?
Обновление: Я нашел это объяснение в W3C:
Примечание. Эта спецификация не полностью определяет взаимодействие: before и: after с заменяемыми элементами (такими как IMG в HTML). Это будет определено более подробно в будущих спецификациях.
Обновление 2:
Я забыл упомянуть - мне нужно визуализировать атрибут alt изображения с помощью CSS.
img:before {
display: block;
content: attr(alt);
background-color: #333;
/* etc. */
}