: раньше псевдокласс не работал с изображениями - PullRequest
Новая
       4

: раньше псевдокласс не работал с изображениями

7 голосов
/ 28 марта 2011

У меня есть следующий 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 не отображается для изображения, но отображается для любого делителя.

Почему?

Обновление: Я нашел это объяснение в W3C:

Примечание. Эта спецификация не полностью определяет взаимодействие: before и: after с замененными элементами (такими как IMG в HTML). Это будет определено более подробно в будущей спецификации.

Обновление 2:

Я забыл упомянуть - мне нужно визуализировать атрибут «alt» изображения с помощью CSS. 

img:before {
    display: block;
    content: attr(alt);
    background-color: #333;
    /* etc. */
}

1 Ответ

4 голосов
/ 28 марта 2011

Учитывая спецификацию, которую вы цитировали, я полагаю, что это тот случай, когда вам нужно обернуть изображение в элемент и применить к нему :before.

EDIT:

Учитывая, что атрибут 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>
...