How to align the after pseudo-element in the center
ul.main-menu { margin-top: 36px; list-style-type: none; text-decoration: none; } li { display: inline; text-transform: uppercase; color: #aaaaaa; margin-right: 123px; font-family: $fnt_rl; } a { display: inline-block; text-align: center; color: #aaaaaa; position: relative; margin: 0 auto; } a:hover { text-decoration: none; } .selected:after { position: absolute; top: 24px; left: 0; right: 0; margin: 0 auto; text-align: center; content: ''; width: 115px; border-bottom: 4px solid #f29400; } <ul class="main-menu"> <li><a class="selected" href="index.html">Главная</a></li> <li><a href="about_us.html">О нас</a></li> <li><a href="clients.html">Клиенты</a></li> </ul> 
