Анимация подчеркивания текста в CSS - самый простой способ? - PullRequest
Новая
       150

Анимация подчеркивания текста в CSS - самый простой способ?

2 голосов
/ 13 июля 2020

У меня появляется эффект анимированного подчеркивания, когда пользователь указывает ссылки на моем веб-сайте. Подчеркивание немного шире, чем сам текст, так как есть немного горизонтальных отступов.

Вот эффект, которого я хотел добиться и сделал:

image 

:root {
    --link-color: #f80;
    --link-underline-padding: .5em;
}

a {
    color: var(--link-color);
    display: inline-block;
    padding: 0 var(--link-underline-padding);
    text-decoration: none;
}

a:after {
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-left: calc(var(--link-underline-padding) * -1);
    margin-top: .2em;
    transition: width .5s;
    width: 0;
}

a:hover:after {
    width: calc(100% + var(--link-underline-padding) * 2);
}
I find <a href="#">dogs</a> pretty cool.

Ответы [ 2 ]

2 голосов
/ 13 июля 2020

Простая фоновая анимация может сделать это: 

a {
  background: linear-gradient(currentColor 0 0) 
    bottom left/
    var(--underline-width, 0%) 0.1em
    no-repeat;
  color: #f80;
  display: inline-block;
  padding: 0 .5em 0.2em;
  text-decoration: none;
  transition: background-size 0.5s;
}

a:hover {
  --underline-width: 100%;
}
I find <a href="#">dogs</a> pretty cool.

Связано:

Как анимировать подчеркивание слева направо?

Как навести подчеркивание, начиная с центра, а не слева?

1 голос
/ 13 июля 2020

Если вы установите a на position: relative;, вы можете затем использовать position: absolute; и left: 0px; для pu sh, а затем просто использовать width: 100%, чтобы он увеличился на всю длину. 

:root {
    --link-color: #f80;
    --link-underline-padding: .5em;
}

a {
    position: relative;
    color: var(--link-color);
    display: inline-block;
    padding: 0px var(--link-underline-padding);
    text-decoration: none;
}

a:after {
    position: absolute;
    left: 0px;
    background-color: var(--link-color);
    content: '';
    display: block;
    height: .1em;
    margin-top: .2em;
    transition: width .5s;
    width: 0;
}

a:hover:after {
    width: 100%;
}
I find <a href="#">dogs</a> pretty cool.
...