我正在使用 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 方法。
最佳答案
据我所知,
:before
和 :after
伪元素是内联框。因此,使用 display: block;
可能会对您有所帮助。
关于CSS: 伪元素 :before 和 :after 从原始元素继承宽度/高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6596841/