html - remove border with :first-child :before -
so, have read lot of examples , nippets can't figure out. have list element sub-list. have border-top these elements. i'm managing remove first border top doesn't work, not classes...
here code, please help!
<ul> <li><a href="#">about owsd</a></li> <li><a href="#">why owsd</a> <ul> <li><a href="#">objectives</a></li> <li><a href="#">women , gender</a></li> <li><a href="#">success stories</a></li> <li><a href="#">gender insite</a></li> <li><a href="#">partners</a></li> </ul> </li> <li><a href="#">network</a></li> <li><a href="#">career development</a></li> <li><a href="#">resources</a></li> <li><a href="#">resources</a></li> </ul> </nav> nav { display: block; text-decoration: none; } ul li a{ position: relative; left: 0px; color: #1d5237; background-color: #1a1a1a; font-weight: 600; font-size: 16px; padding: 20px 0px 20px 20px; width: 100%; } ul li a::before{ content: ''; border-top: 1px solid #1d5237; position: absolute; top: 1px; width: 100%; } ul li a:hover, ul li a:active, ul li a:focus{ color: #4a9367; } li ul li a{ position: relative; display: noe; left: 0px; color: #cccccc; background-color: #2a2a2a; font-weight: 400; font-size: 16px; padding: 18px 0px 18px 37px; width: 100%; } li ul li a::before{ content: ''; border-top: 1px solid #666666; position: absolute; top: 1px; width: 100%; } li ul li a:hover, li ul li a:active, li ul li a:focus{ color: #cccccc; } also, reach second list element 'li ul li a' correct. there way better write it??
try adding after li ul li a:before
li ul li:first-child a:before{ content: ''; border-top: 0; position: absolute; top: 1px; width: 100%; }
Comments
Post a Comment