html - Make border width wider than element (not using padding) -
screenshot of want achieve: (i covered logos , links)
i have header contains 2 element : logos section , navigation bar.
now trying create border-top nav element, 100% width of screen in given size.
i can not use padding-left-right , avoid using markup.
is achievable? using :before?
<header> <div class="site-header"> stuff + full width border in middle! </div> <nav> <ul> <li>linka</li> <li>link b</li> </ul> </nav> </header> .site-header, nav { max-width: 500px; margin: 0 auto; } nav { border-top: 1px solid red; }
fiddle: https://jsfiddle.net/oodrabm2/1/
your nav should outside header or need set width on site-header , ul not nav like:
.site-header, nav ul { max-width: 500px; margin: 0 auto; } nav { border-top: 1px solid red; }
<header> <div class="site-header"> stuff + full width border in middle! </div> <nav> <ul> <li>linka</li> <li>link b</li> </ul> </nav> </header>
Comments
Post a Comment