【发布时间】：2011-09-29 14:58:17
【问题描述】：
我正在使用 css 伪元素 :before 和 :after 为我在网站上的一些图像提供缩进效果。但是，如果不指定宽度和高度，这些将不会显示。这会让我为每个图像指定一个固定的宽度和高度，我猜这对静态网页有效。
但是，由于这些图像是使用 jQuery 动态生成的并且是用户提交的，因此图像的宽度和高度每次都不同。现在我可能可以通过从图像中获取宽度并将其传递给 :before 来使用 Javascript 来解决这个问题，但这似乎对于这样的事情来说工作量太大了。
我的问题是，是否有办法仅使用 CSS 来执行此操作，将包含图像的宽度传递给此
基本页面布局：
<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 方法。
【问题讨论】：
-
为什么
position指定了两次li:before？ -
不明白 Q，这段代码（除了双定位）在水平线上生成图像，它们之间没有空间，你是说你想要它们之间的空间吗？或者图像在移动应用程序中永远不会水平，如果是这种情况，为什么要使用浮动？那么你所说的“不同值的缩进”是什么意思，你真的想让图像看起来居中吗..抱歉愚蠢的问题，但真的没有得到你想要达到的外观;） - 也许是一个模拟图像所需的外观
-
抱歉给您带来了困惑，我的意思是缩进的样子，我想让图像沉入页面，所以我在 :before 上应用了一个框阴影，它与图像重叠并给出了边缘周围的图像阴影，使其看起来像是沉入页面中。
标签： css pseudo-element