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

pseudo clases css

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 ancho y alto 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 solo con CSS, para que el ancho de contener la imagen se transmita al: before en este <li>, de modo que los pseudo-elementos: before y: after heredan el ancho y altura del elemento original.

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

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

}

PD: la compatibilidad necesaria es solo para navegadores Webkit móviles.

EDITAR

Por ejemplo, podría agregar líneas al CSS con Javascript usando 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 significa que también tendré que trabajar con identificaciones dinámicas. Lo cual no será difícil, pero me pregunto si no hay una única forma de CSS.

Answer 1

Tratar:

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

Me funcionó.

Answer 2

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

Answer 3

:before y :after pseudo-elements son cajas en línea tanto como yo sé. Por lo tanto, usando display: block; podría ayudarte

Answer 4

position: -ms-page arregló el problema

Answer 5

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