Dlaczego pseudoelementy: before I: after nie działają z elementami `img'? [duplikat]

to pytanie ma już odpowiedzi tutaj : Does: before not work on img elements? (13 Odpowiedzi) CSS: po nie dodaniu treści do niektórych elementów (4 odpowiedzi) Zamknięte 6 lat temu. [[19]}próbuję użyć :before pseudo element z elementem img.

Rozważ ten HTML i CSS...

HTML 

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

CSS 

img:before {
  content: "hello";
}

JsFiddle .

To nie daje pożądanego efektu (testowane w Chrome 13 i Firefox 6). Jednak działa z elementem div lub span.

Dlaczego nie?

Czy istnieje sposób, aby pseudoelementy działały z elementami img?

Author: Community, 2011-09-13
Source

3 answers

Spec mówi ...

Uwaga. Specyfikacja ta nie definiuje w pełni interakcji :before i :after z wymienionymi elementami (takimi jak IMG w HTML). Zostanie to zdefiniowane bardziej szczegółowo w przyszłej specyfikacji.

To chyba oznacza, że nie działają z img elementami (na razie).

Zobacz też tę odpowiedź .

 134
Author: alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:09:33

Może się zdarzyć, że dostawcy przeglądarek nie zaimplementowali pseudo elementów na znaczniku img ze względu na ich interpretację specyfikacji: element img, ściśle mówiąc, nie jest elementem poziomu bloku ani elementem inline, jest to pusty element.

 7
Author: Joel Glovier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-14 16:18:41

Tylko do testowania i wiedząc, że to nie jest ładne, możesz wykonać następujące czynności, aby pseudo elementy działały z elementami 'img'.

Dodaj: display: block; content: ""; height: (height of image)px do elementu img w CSS.

Chociaż spowoduje to, że Twój znacznik img będzie pusty, ponieważ content: "" możesz wtedy

Dodaj: style="background-image: url(image.jpg)" do elementu img w html.

[[3]}przetestowano to w Fx, Chrome i Safari
 6
Author: Ferdi Emmen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-26 08:23:20