Support » CSS / opmaak vragen » Streepje onder second child menu breder

  • Opgelost Sasseke

    (@sasseke)


    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

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Moderator Marcel Bootsman

    (@mbootsman)

    WordPress specialist sinds 2009

    Sasseke,

    De second-child selector 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:before

    Hoi 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

3 reacties aan het bekijken - 1 tot 3 (van in totaal 3)
  • Het onderwerp ‘Streepje onder second child menu breder’ is gesloten voor nieuwe reacties.