CSS3 : 如果他的 parent 有 overflow:hidden 则消失；

Question

我遇到了以下问题：我试图显示一个箭头，如果我从 #colorSelect 中删除 overflow:hidden，它就会工作。但是我需要 overflow:hidden 因为我里面有流元素。

我该如何解决这个问题？如何显示箭头（：在元素之后）并同时保持溢出？谢谢。

#colorSelect {
width: 70%;
background: #3B3A3A;
border-radius: 5px;
clear: both;
margin: 30px auto 0;
padding: 20px;
position: relative;
color: #fff;
font-size: .8em;
overflow: hidden;
border: 1px solid rgba(150,150,150,0.00);
box-shadow: 0px 0px 22px 10px rgba(0,0,0,0.50); 
/*display:none;*/
}

#colorSelect:after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #3B3A3A;
border-width: 10px;
margin-left: -10px;       
}

Answer 1

您可以使用:before显示箭头，:after清除浮动，如下所示

#colorSelect {
width: 70%;
background: #3B3A3A;
border-radius: 5px;
clear: both;
margin: 30px auto 0;
padding: 20px;
position: relative;
color: #fff;
font-size: .8em;
border: 1px solid rgba(150,150,150,0.00);
box-shadow: 0px 0px 22px 10px rgba(0,0,0,0.50); 
/*display:none;*/
}

#colorSelect:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #3B3A3A;
border-width: 10px;
margin-left: -10px;       
}

#colorSelect:after{
    content:"";
    display:block;
    clear:both;
}

CSS3 : 如果他的 parent 有 overflow:hidden 则消失；

CSS3 :after disappear if his parent has overflow:hidden;

css

overflow

pseudo-element