CSS:伪元素:从原始元素继承宽度/高度之前和之后

Question

我正在使用css伪元素:before和:after对网站上的一些图像给出缩进效果.但是,如果不指定宽度和高度,则不会显示这些内容.这将让我为每个图像指定固定的宽度和高度,我想这对静态网页是有用的.

但是,因为这些图像是使用jQuery动态生成的并且是用户提交的,所以每次图像的宽度和高度都不同.现在我可以通过从图像获取宽度并将其传递给:之前的Javascript来解决这个问题,但这似乎对于像这样的事情来说太多了.

我的问题是,如果有一种方法只使用CSS,要将包含图像的宽度传递给:在此<li>之前,以便:before和:after伪元素继承宽度和原始元素的高度.

基本页面布局:

<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:所需的兼容性仅适用于移动Webkit浏览器.

编辑

我可以通过使用以下行使用Javascript向CSS添加行:

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

但这意味着我还必须使用动态id.这不会很难,但我只是想知道是否只有CSS方式.

Answer 1

:before和我所知道的:after伪元素是内联框.因此,使用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);
}