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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6596841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:56:35  来源:igfitidea点击:

CSS: Pseudo-elements :before and :after inheriting width/height from original element

csspseudo-element

提问by Marc Hoogvliet

I am using the css pseudo elements :before and :after to give an indent-effect on some of my images on a website. However without specifying the width and height, these won't display. This would have me specifying a fixed width and height for each of the images, which I guess would work for a static webpage.

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

However because these images are generated dynamically with jQuery and are user submitted, images differ in width and height each time. Now I could probably can fix this with Javascript by getting the width from the image and passing it on to the :before, but this seems like it is too much work for something like this.

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

My question is if there is a way to do this with CSS only, to have the width of containing the image being passed on to the :before on this < li >, so that the :before and :after pseudo-elements inherit the width and height of the orginal element.

我的问题是,是否有一种方法可以仅使用 CSS 来做到这一点,将包含图像的宽度传递给此 <li> 上的 :before,以便 :before 和 :after 伪元素继承宽度和原始元素的高度。

The basic page layout:

基本页面布局:

<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: compatibility needed is only for mobile Webkit browsers.

PS:需要的兼容性仅适用于移动 Webkit 浏览器。

EDIT

编辑

I could for instance add lines to the CSS with Javascript by using the following lines:

例如,我可以使用以下几行向带有 Javascript 的 CSS 添加行:

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

But this would mean that I'll also have to work with dynamic id's. Which won't be hard, but I'm just wondering if there isn't a CSS only way.

但这意味着我还必须使用动态 ID。这并不难,但我只是想知道是否没有 CSS 唯一的方法。

回答by Saeed Neamati

:beforeand :afterpseudo-elements are inline boxesas much as I know. Therefore, using display: block;might help you.

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

回答by Hugo Silva

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

回答by srijishks

it seems content:" ":is important along with display: block

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

回答by Piotr Czy?

Try:

尝试:

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

It's worked for me.

它对我有用。