CSS：伪元素 :before 和 :after 从原始元素继承宽度/高度

Posted 2023-02-22

【中文标题】CSS：伪元素 :before 和 :after 从原始元素继承宽度/高度

【英文标题】：CSS: Pseudo-elements :before and :after inheriting width/height from original element

【发布时间】：2011-09-29 14:58:17

【问题描述】：

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

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

我的问题是，是否有办法仅使用 CSS 来执行此操作，将包含图像的宽度传递给此

上的 :before，以便 :before 和 :after 伪元素继承原始元素的宽度和高度。

基本页面布局：

<ul>
   <li>
       <img src="foo" />
   </li>   
</ul>    

# css style simplefied
ul float:left; list-style:none
lifloat:left;
li imgfloat: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 上应用了一个框阴影，它与图像重叠并给出了边缘周围的图像阴影，使其看起来像是沉入页面中。

【参考方案1】：

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

【讨论】：

我试过了，但没有任何区别，即使在 本身上设置了固定的宽度和高度。

那里已经有一个float: left 规则，所以display: block 不会改变任何事情。

我遇到了伪元素问题，这是一个有用的提示（我太习惯于假设所有内容都已显示：默认阻止！）

不要忘记在父元素上设置'position:relative'。此外，FF 可能需要 'top:0;左：0;'

【参考方案2】：

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);

【参考方案3】：

似乎content:" ": 和display: block 一样重要

【参考方案4】：

试试：

ul 
    position: relative;

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

它对我有用。