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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -