CSS3:消失后，如果他的父母有溢出:隐藏;

Question

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

我该如何解决这个问题?我如何显示箭头(:元素后)，并保持溢出在同一时间?谢谢你。

#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来清除Float，就像下面

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