Изменение границы-снизу до границы

Question

Я хочу иметь транзистор в моем списке меню при наведении курсора, но я хочу изменить границу-снизу на границу. Как я могу это сделать?

.sliding-middle-out { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding-bottom: 3px; 
 
} 
 
.sliding-middle-out:after { 
 
\t content: ''; 
 
\t display: block; 
 
\t margin: auto; 
 
\t height: 3px; 
 
\t width: 0px; 
 
\t background: transparent; 
 
\t transition: width .5s ease, background-color .5s ease; 
 
} 
 
.sliding-middle-out:hover:after { 
 
\t width: 100%; 
 
\t background: blue; 
 
}

<li class="scroll sliding-middle-out"><a href="#features">Features</a></li>

Answer 1

Вы можете использовать :before псевдо элемент вместо псевдо элемента :after поэтому строка отображается в верхней части (до) вашей ссылке:

.sliding-middle-out { 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t padding-bottom: 3px; 
 
} 
 
.sliding-middle-out:before { 
 
\t content: ''; 
 
\t display: block; 
 
\t margin: auto; 
 
\t height: 3px; 
 
\t width: 0px; 
 
\t background: transparent; 
 
\t transition: width .5s ease, background-color .5s ease; 
 
} 
 
.sliding-middle-out:hover:before { 
 
\t width: 100%; 
 
\t background: blue; 
 
}

<li class="scroll sliding-middle-out"><a href="#features">Features</a></li>

Обратите внимание, что строка не выполнена с помощью свойства границы, но с фоном псевдоэлемента