псевдоэлементы ко всем img'ам в таблице

[maritca]

Имеется такая html-структура:

 

<table class="preview"><tbody><tr><td><div><a class="page-link-object" href="product/kitchen.htm"><img src="kitchens_icon.png"></a></div><div><a href="product/kitchen.htm">Кухни</a></div></td><tr></tbody></table>

 

Требуется подключить псевдоэлемент :after ко всем тегам img таблицы .preview. 

Моя версия CSS:

 

.preview img:after {  content: '';  position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  border-radius: 5px;  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) inset;  opacity: 1;  background: #000000;}

 

Что не так и главное - почему?

[rus]

не видя результата трудно сказать, но может не хватает высоты?

[Светлана Г.]

Вот тут есть обсуждение этой проблемы.

http://stackoverflow.com/questions/14585070/css-after-pseudo-element-not-showing-up-on-img

 

Можно нагуглить еще.

[SelenIT]

Img — пустой элемент (не может иметь содержимого), поэтому у него не может быть псевдоэлементов, добавляемых внутрь элемента перед/после контента. Единственным браузером, кто считал иначе, была, емнип, Опера на Престо.
 
Решение — вешать псевдик не на img, а, например, на .preview .page-link-object (предварительно задав последнему display:block или inline-block для надежности).