CSS：伪元素：before和：after从原始元素继承宽度/高度

我使用css伪元素：之前和：之后给一个缩进效果我的一些网站上的图像。但是，如果不指定宽度和高度，这些将不显示。这将让我为每个图像指定一个固定的宽度和高度，我猜这将适用于一个静态网页。

然而，因为这些图像是动态生成的jQuery和用户提交，图像的宽度和高度每次不同。现在我可能可以解决这个与Javascript通过获取图像的宽度，并将其传递给：之前，但这似乎是这样的东西太多的工作。

我的问题是如果有一个方法来做到这一点，只有CSS，包含图像的宽度传递到： li&gt ;,因此：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.4);   

}

PS：所需的兼容性仅适用于移动Webkit浏览器。

编辑

我可以通过使用下面的行添加行到CSS使用Javascript：

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

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

解决方法

：before和：after伪元素是我知道的内联框。因此，使用display：block;可能会帮助你。

原文地址：https://www.jb51.cc/css/220073.html