CSS: Pseudo-elementos: antes y después de heredar ancho/altura del elemento original

Question

Estoy usando los pseudo elementos css: before y: after para dar un efecto de sangría en algunas de mis imágenes en un sitio web. Sin embargo, sin especificar el ancho y la altura, estos no se mostrarán. Esto me obligaría a especificar un ancho y una altura fijos para cada una de las imágenes, lo que supongo que funcionaría para una página web estática.

Sin embargo, debido a que estas imágenes se generan dinámicamente con jQuery y son enviadas por el usuario, las imágenes difieren en anchura y altura cada vez. Ahora probablemente podría arreglar esto con Javascript obteniendo el ancho de la imagen y pasándola al: anterior, pero parece que es demasiado trabajo para algo como esto.

Mi pregunta es si hay una manera de hacer esto con CSS solamente, para tener el ancho de contener la imagen que se pasa al: antes en este < li>, de modo que el: antes y después del pseudo- los elementos heredan el ancho y alto del elemento original.

El diseño básico de páginas:

<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: la compatibilidad necesaria es sólo para navegadores Webkit móviles.

EDITAR

, por ejemplo, podría añadir líneas a la CSS con Javascript mediante el uso de las siguientes líneas:

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

Pero esto significaría que yo también voy a tener que trabajar con la dinámica id . Lo cual no será difícil, pero me pregunto si no hay una única forma de CSS.

Answer 1

:before y :after pseudo-elementos son cajas de línea tanto como yo sé. Por lo tanto, puede ser útil usar display: block;.

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); 
} 

Answer 3

parece content:" ": es importante junto con display: block

Answer 4

Probar:

ul { 
    position: relative; 
} 
li:before { 
    content: '\00a0'; 
    display: block; 
    float: left; 
    position: absolute; 
    height: 100%; 
} 

Ha funcionado para mí.

Answer 5

position: -ms-page solucionado el problema para mí