Beschrijving
Nederlands
Forums / Thema en CSS/opmaak / Streepje onder second child menu breder
Streepje onder second child menu breder
Hoi
ik ben bezig met de site http://www.db7663.web54.ixl.nu/. Rechtsboven is een menu en ik heb geanimeerde lijntjes onder elk item gezet. Echter het tweede menu item is wat breder en daarom wilde ik het lijntje voor deze wat breder maken (ipv 70% 90% of 100%).
Dit is de code:.menu-item:second-child > a { position: relative; text-decoration: none; } .menu-item:second-child > a:before { content: ""; position: absolute; width: 100%; height: 4px; bottom: 10px; left: 15%; background-color: #fff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .menu-item:second-child > a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }De code zonder second child erin werkt prima, maar hij lijkt deze code niet te ‘pakken’ (streepje tweede item wordt niet breder wordt ook 70% net als bij de andere drie).
Kan iemand mij hiermee helpen?
Groet
Sasseke
Sasseke,
De
second-childselector bestaat niet, gebruik hiervoor:nth-child(2).Als je nu eens in plaats van second child eens gaat werken met het id van het lijstitem?
Dus zo iets als li#menu-item-20 a:beforeHoi Marcel en Arjan
bedankt voor jullie reacties.
Ik heb het id gebruikt in de code en het streepje is nu zo breed als het hoort 🙂Bedankt voor jullie hulp!
Groeten
Sasseke
Het onderwerp ‘Streepje onder second child menu breder’ is gesloten voor nieuwe reacties.
- In: Thema en CSS/opmaak
- 3 reacties
- 3 deelnemers
- Laatste antwoord van: Sasseke
- Laatste activiteit: 8 jaren, 10 maanden geleden
- Status: opgelost



