CSS: Pseudo-elements :before and :after inheriting width/height from original element


I am using the css pseudo elements :before and :after to give an indent-effect on some of my images on a website. However without specifying the width and height, these won't display. This would have me specifying a fixed width and height for each of the images, which I guess would work for a static webpage.

However because these images are generated dynamically with jQuery and are user submitted, images differ in width and height each time. Now I could probably can fix this with Javascript by getting the width from the image and passing it on to the :before, but this seems like it is too much work for something like this.

My question is if there is a way to do this with CSS only, to have the width of containing the image being passed on to the :before on this < li >, so that the :before and :after pseudo-elements inherit the width and height of the orginal element.

The basic page layout:

       <img src="foo" />

# css style simplefied
ul{ float:left; list-style:none}
li img{float:left}
          box-shadow:0 1px 2px rgba(0,0,0,0.4);   


PS: compatibility needed is only for mobile Webkit browsers.


I could for instance add lines to the CSS with Javascript by using the following lines:

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';    
document.styleSheets[1].insertRule('ul li:before { height: ' +  heightImg+ '; }', 0);

But this would mean that I'll also have to work with dynamic id's. Which won't be hard, but I'm just wondering if there isn't a CSS only way.

Best Solution

:before and :after pseudo-elements are inline boxes as much as I know. Therefore, using display: block; might help you.