Using "position: static" for pseudo classes for icon (CSS) -
i trying make hamburger menu, , succeeded accidentally below. i'd know why goes wrong if set position: static
, default value of position
, #hamburger:before
, #hamburger:after
.
also, in setting above, shouldn't these 2 show in front , of #hamburger
? (so there 3 pieces of bread in row.)
#hamburger, #hamburger:before, #hamburger:after { position: absolute; /* here! */ display: block; width: 35px; height: 5px; background-color: red; border-radius: 1px; content: ''; } #hamburger:before { top: -10px; } #hamburger:after { bottom: -10px; }
<div id="hamburger"></div>
here's js bin test.
a element has position:static positioned normal flow of page. in addition this, html elements position:static default. position:static , default value position same value.
the reason why things aren't working because static positioned elements unaffected top, bottom, right , left properties.
Comments
Post a Comment