Почему псевдоэлементы:before и:after не работают с элементами img?

Question

Я пытаюсь использовать :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 элементы?

Answer 1

Спецификация говорит...

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

Я думаю, это означает, что они не работают с img элементы (на данный момент).

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

Answer 2

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

Answer 3

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

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

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

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

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