css设置元素继承父元素宽度_CSS：伪元素：之前和之后：从原始元素继承宽度/高度...

我使用CSS伪元素：before和：after在网站上为我的某些图像提供缩进效果。但是，没有指定宽度和高度，这些将不会显示。这将让我为每个图像指定一个固定的宽度和高度，我想这将适用于静态网页。CSS：伪元素：之前和之后：从原始元素继承宽度/高度

但是，因为这些图像是使用jQuery动态生成的并且是用户提交的，所以图像的宽度和高度每次都不相同。现在我可能可以通过从图像中获取宽度并将其传递给：before来解决这个问题，但是对于像这样的东西来说，这看起来太像了。

我的问题是，如果有一种方法可以只用CSS来做到这一点，那么将包含图像的宽度传递给：before在此< li>之前，以便：before和：after pseudo-元素继承了原始元素的宽度和高度。

基本页面布局：

# 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浏览器。

编辑

我可以例如通过使用以下行添加行的CSS使用Javascript：

var heightImg = (($('ul li:nth-child(n)').height())) + 'px';

document.styleSheets[1].insertRule('ul li:before { height: ' + heightImg+ '; }', 0);

但是，这将意味着我还必须动态ID的工作。这不会很难，但我只是想知道是否没有CSS的唯一方式。

+1

为什么你给'li：before'指定'position'两次？ –

+0

不理解Q，这个代码(双重定位)在水平线上生成图像，它们之间没有空间，你是说你想要它们之间的空间吗？或者移动应用程序中的图像永远不会水平，如果这是为什么使用浮动的情况？那么你是什么意思“缩进不同的价值观”，你真的希望图像看起来集中......对于愚蠢的问题对不起，但真的没有得到你想要达到什么样子) - 也许是一个嘲弄的形象需要的外观 –

+0

对不起，我的意思是我想让图像沉入页面，所以我在之前应用了一个箱形阴影：在这之前，它与图像重叠并给出图像阴影边缘使它看起来像是沉入页面。 –