本文介绍了伪元素:before和溢出隐藏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个带有两个边框的元素.我通过添加一个伪元素实现了这一点:
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和溢出隐藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!