nth-child und after kombinieren

    Hallo zusammen,


    aktuell ist es so, dass wenn man mit dem Mauszeiger auf einen Menüeintrag zeigt, ein farbiges Kästchen unter dem Eintrag angezeigt wird. Dieser wird mit einem :After gelöst.


    Code
    .offcanvas-menu, .sp-megamenu-parent > li > a:after {
background-color: blue;
}


    Nun möchte ich aber, dass die Menüeinträge in unterschiedlichen Farben unterstrichen werden. Hierzu wollte ich den nth-child Selektor einbringen... Nur bekomme ich es nicht hin...


    In dem folgenden Beispiel wollte ich, dass der 2. Eintrag in Rot unterstrichen wird, ich habe ergoogelt, dass es wie folgt klappen soll, bei mir klappt es aber dennoch nicht...


    Code
    .offcanvas-menu, sp-megamenu-parent > li > a:nth-child(2):after {
    background-color: red;
}


    Habt ihr Ideen oder Lösungsansätze für mich?