伪元素:before和溢出隐藏 [英] Pseudo element :before and overflow hidden

问题描述

我有一个带有两个边框的元素.我通过添加一个伪元素实现了这一点:

I have a element which has two borders. I achieved that by adding a pseudo element:

.inner:before {
    width: 72px;
    height: 28px;
    content: '';
    display: block;
    border: 3px solid rgb(255, 0, 0);
    position: absolute;
}

该元素被另一个具有overflow: hidden属性的div包裹.

The element is wrapped with another div which has the property overflow: hidden.

如您在此处看到的那样: http://jsfiddle.net/HKEn4/1/ .inner-element是隐藏，但不是伪元素(在OSX上用野生动物园，Firefox和chrome测试).

As you can see here: http://jsfiddle.net/HKEn4/1/ the .inner-element is hidden but not the pseudo element (tested with safari, firefox and chrome on OSX).

如何隐藏伪元素?

推荐答案

我在.wrapper类中添加了position: relative;，它可以正常工作！

I added position: relative; in the .wrapper class and it works!

请参阅小提琴: http://jsfiddle.net/HKEn4/2/

这篇关于伪元素:before和溢出隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！