Как использовать: селектор nth-типа с селектором: before в css3?

Question

Я работаю в проекте Drupal 8. У меня есть боковая панель, где я динамически вставил неупорядоченный список в DOM. Я пытался вставить некоторые SVG через псевдокласс CSS3: раньше, и это сработало. Однако мне нужно вставить разные SVG для разных якорных тегов в этом списке. Поэтому я пытаюсь сделать это так:

ul {
 li {
  a {
    &:nth-of-type(1):before {
     //Code goes here
    }
    &:nth-of-type(2):before {
     //Code goes here
    }
    &:nth-of-type(3):before {
     //Code goes here
    }
  }
 }
}

Есть идеи, как этого добиться? Заранее спасибо

HTML разметка:

<ul>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 1</a>
    </li>
    <li>
    <a href="" data-drupal-link-system-path="<front>">Menu Link 2</a>
                                        <ul>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 1</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 2</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 3</a>
    </li>
    </ul>

    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 3</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 4</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 5</a>
    </li>
</ul>

Что я пробовал до сих пор:

ul {
     border: none;
     -webkit-box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
     -moz-box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
      box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
      list-style: none;
      padding: 0;
      margin: 0;
      width: rem(280px);
      li {
          a {
            background-color: $white;
            color: $greyish-brown;
            display: block;
            padding: rem(20px) rem(35px);

            &:hover {
               background-color: $blue-green;
               color: $white;
            }
            }
            a:nth-of-type(1):before {
              @extend %svg-sidebar-decorations;
              background-image: url("../images/picto-info-sant.svg");
            }
             a:nth-of-type(2):before {
                @extend %svg-sidebar-decorations;
                background-image: url("../images/picto-infosocial.svg");

             }
             a:nth-of-type(2):before {
                @extend %svg-sidebar-decorations;
                background-image: url("../images/picto-infosocial.svg");
             }
            }

    %svg-sidebar-decorations {
    content: '';
    display: inline-block;
    width: rem(14px);
    height: rem(16px);
    margin-top: rem(3);
    margin-right: rem(10px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Answer 1

Используйте nth-child(n) вместо nth-of-type(n) и переместите эти селекторы на уровень li.

Ваш SCSS (?) Может выглядеть примерно так:

ul {
  li {
    &:nth-child(1) a:before {
      //Code goes here
    }
    &:nth-child(2) a:before {
      //Code goes here
    }
    &:nth-child(3) a:before {
      //Code goes here
    }
  }
}

Пример CodePen