46

我正在使用 css 伪元素 :before 和 :after 对网站上的一些图像进行缩进效果。但是，如果不指定宽度和高度，这些将不会显示。这将使我为每个图像指定一个固定的宽度和高度，我猜这对静态网页有效。

然而，由于这些图像是使用 jQuery 动态生成的并且是用户提交的，因此图像的宽度和高度每次都不同。现在我可能可以通过从图像中获取宽度并将其传递给 :before 来使用 Javascript 来解决这个问题，但这似乎对于这样的事情来说工作量太大了。

我的问题是是否有办法仅使用 CSS 来执行此操作，将包含图像的宽度传递给此 <li> 上的 :before，以便 :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 方法。

4

4 回答 4

81

:before据我所知，:after伪元素是内联框。因此，使用display: block;可能会对您有所帮助。

于 2011-07-06T13:25:52.407 回答
6 
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);
}
于 2014-02-21T00:26:34.873 回答
4

这似乎content:" ":很重要display: block

于 2016-05-03T02:16:04.720 回答
1

尝试：

ul {
    position: relative;
}
li:before {
    content: '\00a0';
    display: block;
    float: left;
    position: absolute;
    height: 100%;
}

它对我有用。

于 2016-07-06T08:27:37.237 回答