css - CSS3 :after disappear if his parent has overflow:hidden; -
i've following problem: i'm trying show arrow, , works if remove overflow:hidden #colorselect. need overflow:hidden 'cos have flow elements inside.
how can fix this? how can show arrow (:after element) , keeping overflow in same time? thank you.
#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; }
you can use :before
show arrow, , :after
clear float follows
#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; }
Comments
Post a Comment