Почему: до и: после псевдоэлементов работать с элементами `img`?

Я пытаюсь использовать :before псевдоэлемент с элементом img.

Рассмотрим этот HTML и CSS...

HTML

<img src="http://0.gravatar.com/avatar/this-is-not-a-hash" alt="" />

CSS

img:before {
  content: "hello";
}

jsFiddle.

Это не дает желаемого эффекта (проверяется в Chrome 13 и Firefox 6). Однако он работает с элементом div или span.

Почему бы и нет?

Есть ли способ заставить псевдоэлементы работать с элементами img?

Ответ 1

Спектр говорит...

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

Я предполагаю, что это означает, что они не работают с элементами img (пока).

Также см. этот ответ.

Ответ 2

Просто для тестирования и зная, что это не очень хорошо, вы можете сделать следующее, чтобы псевдо-элементы работали с элементами "img".

Добавить: display: block; content: ""; height: (height of image)px к элементу img в вашем CSS.

Хотя это сделает ваш тег img пустой причиной content: "", вы можете

Добавить: style="background-image: url(image.jpg)" к вашему элементу img в html.

Протестировано в Fx, Chrome и Safari

Ответ 3

Возможно, поставщики браузеров не реализовали псевдоэлементы в теге img из-за их интерпретации спецификации: элемент img, строго говоря, не является элементом уровня блока или встроенным элементом, это пустой элемент.