Как добавить псевдокласс hover перед псевдоклассом before, соблюдая вложенность, в препроцессоре less?

Недавно начал изучать Less и во время практики столкнулся с проблемой.

.navbar{
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

    ul{
        display: flex;
        justify-content: center;
        align-items: center;
  
        li{
            margin-left: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;

            li::before{
                content: '';
                bottom: -20%;
                background: #fff;
                width: 0;
                height: 2px;
                position: absolute;

            &:hover{
                width: 100%;
                transition: .5s;
            }
            }
            }
    }
}

Результат компиляции:

.navbar {
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.navbar ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbar ul li {
  margin-left: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.navbar ul li li::before {
  content: '';
  bottom: -20%;
  background: #fff;
  width: 0;
  height: 2px;
  position: absolute;
}
.navbar ul li li::before:hover {
  width: 100%;
  transition: 0.5s;
}

Суть проблемы в том, что hover после компиляции стоит после before (плюс, создается второй li). Я пробовал перемещать блок с hover выше, но естественно это не помогло.

Есть ли возможность это исправить не выходя из вложенности? Заранее спасибо.