Есть например примитивное меню в котором есть разделители в виде вертикальных полос. Я делаю это с помощью бордера вот так
.navbar
max-width: 725px
float: left
background: transparent
border: none
&__li:not(:last-child)
border-right: 1px solid white
А вот код меню
<ul class="nav navbar-nav">
<li class="navbar__li active"><a class="navbar__link" href="#">О нас</a></li>
<li class="navbar__li"><a class="navbar__link" href="#">Наши услуги</a></li>
<li class="navbar__li"><a class="navbar__link" href="#">Отзывы</a></li>
<li class="navbar__li"><a class="navbar__link" href="#">Акция</a></li>
<li class="navbar__li"><a class="navbar__link" href="#">Контакты</a></li>
</ul>
А если я захочу подействовать на допустим на ссылку в последнем элементе li как мне поступить? Это может понадобиться если я этот разделитель буду задавать не в li, а в самой ссылке a. Ну или я например буду писать стиль чего либо.
На пример модального окна
.modal-green
&__button
background: green
&__link
color: green