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

Question

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:

<ul>    <li>        <img src="foo" />    </li>    </ul>      # css style simplefied ul{ float:left; list-style:none} li{float:left;} li img{float:left} li:before{           content:"":           position:relative;           position:absolute;           float:left;              box-shadow:0 1px 2px rgba(0,0,0,0.4);     } 

PS: compatibility needed is only for mobile Webkit browsers.

EDIT

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.

Answer 1

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

Answer 2

li{     float:left;     position:relative; } li img{     float:left; } li:before{     content:" ";     position:absolute;     width:100%;     height:100%     box-shadow:0 1px 2px rgba(0,0,0,0.4); }