CSS3 :after disappear if his parent has 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 清除 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;
}