css - Менее распространенный с псевдоклассом и псевдоэлементами

Question

У меня есть элемент списка со ссылкой внутри, используется font-awesome для Less. Как сохранить код в первом псевдоэлементе и повторить во втором, третьем. Есть ли сокращенная запись?

Моя цель не повторять одни и те же свойства для разных элементов. Если &:nth-child(1), &:nth-child(2) и т. д. имеют одинаковое свойство, но с разными top: ...; а также left: ...; в каждом классе.

Я прочитал много тем о stackru и пришел к выводу, что лучшее решение - использовать миксины, но это не работает. Пример с объяснением этого: CSS-Less класс расширяет класс псевдоклассом.

&:nth-child(1){
   property; ...;
}
$:before{
  property; ...; 
}
&:nth-child(2){
   &:nth-child(1);
}
&:nth-child(3){
 &:nth-child(1);
}

        li {
            text-align: center;
            width: 115px;
            height: 90px;
            margin: 1px;
            background: linear-gradient(#ffffff, #d7d7d7);
            &:nth-child(1) {
                .fa-icon;
                .fas;
                &:before {
                    content: @fa-var-globe;
                    color: @txt-color;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
            }
            &:nth-child(2) {
                .fa-icon;
                .fas;
                &:before {
                    content: @fa-var-paper-plane;
                    color: @txt-color;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
            }
            &:nth-child(3){
                .fa-icon;
                .fas;
                &:before{
                    content: @fa-var-paper-plane;
                    color: @txt-color;
                    position: relative;
                    top: 10px;
                    left: 20px;
                }
            }

<nav>
        <ul>
            <li><a href="#">Travel Guide</a></li>
            <li class="active"><a href="#">Service</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">The Tour</a></li>
            <li><a href="#">How to</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS-Less класс расширения класса с псевдо-классом - этот источник кажется очень хорошим решением в моем случае, но код не работает, что не так?

Я очень извиняюсь, если мой английский ужасен, если я не чётко объясню свою проблему.