Только вот не понял, как так вышло что здесь left и right задают ширину элементу before, объясните плз)
ul:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 10%;
right: 10%;
border-top: 4px solid #fff;
}
Александр Веселов Они не ширину задают, а растягивают элемент до границ окна или родительского элемента с position отличного от static. Это происходит если задать противоположность значение. Но при этом можно указать отступы от границ, как в данном случае. Из-за этих отступов создаётся впечатление, будто указана ширина, но по факту элемент просто растянуть не до конца.
Простой
