Как сделать. чтобы border при наведении появлялся слева направо, когда убираю курсор, исчезал тоже слева направо?

Question

[Евгений Климов]

Как сделать, чтобы border при наведении появлялся слева направо, а когда убираю курсор, исчезал тоже слева направо? Должен получиться эффект змейки.

Answer 1

[Евгений Климов]

<@a href="#" class="underline">Наведи курсор!@>

.underline {
position: relative;
cursor: pointer;
font-size: 24px;
text-decoration: none;
}
.underline:after {
display: block;
position: absolute;
right: 0;
bottom: -3px;
width: 0;
height: 2px;
background-color: black;
content: "";
transition: width 0.5s;
}

.underline:hover:after {
width: 100%;
display: block;
position: absolute;
left: 0;
bottom: -3px;
height: 2px;
background-color: black;
content: "";
transition: width 0.5s;
}

Comments

[Astrohas]

Answer 2

[zoozag]

Появляется и исчезает из одной точки
Пявляется и исчезаяет из противоположных точек

Answer 3

[ой всё]

бордер чего?
https://codepen.io/gomoto27/pen/yYoqaa

Comments

[Евгений Климов]

border-bottom

Answer 4

[Марти Макфлай]

Вот так:
a {
position: relative;
color: #00a650; /*задаём цвет ссылки*/
cursor: pointer;
line-height: 1; /*задаём высоту строки*/
text-decoration: none; /*убираем подчёркивание*/

}
a:after {
display: block;
position: absolute;
left: 0; /*изменить на right:0;, чтобы изменить направление подчёркивания */
width: 0;/*задаём длинну линии до наведения курсора*/
height: 2px; /*задаём ширину линии*/
background-color: #00a650; /*задаём цвет линии*/
content: "";
transition: width 0.3s ease-out; /*задаём время анимации*/
}

a:hover:after,
a:focus:after {
width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}

Comments

[Сергей delphinpro]

я смотрю в этом топике никто не умеет оформлять код

вот так это делается:

a:hover:after,
a:focus:after {
  width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}

[ой всё]

Сергей, на мобильном неудобно, сайт не зумируется
они больше озабочены вашим полом и возрастом, нежели удобством пользования