CSS：伪元素：之前和之后：从原始元素继承宽度/高度

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

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

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

基本页面布局：

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

编辑

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

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

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

来源

2011-07-06 Marc Hoogvliet

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

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

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

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

来源

2011-07-06 13:25:52

我试过了，但它并没有什么区别，即使在< li>本身上加上固定的宽度和高度。 –

已经有一个'float：left'规则了，所以'display：block'不会改变一件事情。 – BoltClock

我当时有一个伪元素的问题，这是一个有用的提示（我太习惯于假设一切已经显示：默认情况下，块！） –

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-21 00:26:34

似乎content:" ":是display: block

来源

2016-05-03 02:16:04 srijishks

尝试沿着重要：

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

它为我工作。

来源

2016-07-06 08:27:37

position: -ms-page为我解决了这个问题

来源

2017-09-27 12:59:02 bpoiss

请提供您的答案和清晰的描述。不要编写代码，给出关于您共享的代码的解释，以便其他人也可以理解，这会有所帮助。我请求你阅读FAQ部分，以便有效地使用Stack Overflow。 –

CSS：伪元素：之前和之后：从原始元素继承宽度/高度

回答

相关问题