Почему бы:до и: после псевдо-элементов не работать с элементами` img'? [дубликат]

этот вопрос уже есть ответ здесь:

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

3 98
css pseudo-element css-content

3 ответа:

спец говорит...

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

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

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

105

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

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

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

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

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

6

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

5