“Подчеркните анимацию CSS” Ответ

Текст подчеркивает пари CSS

a:hover {
  text-decoration: underline;
}
Giamblers

Подчеркните анимацию CSS

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #0087ca;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
Repulsive Rhinoceros

Добавить расширение подчеркивания на загрузке страниц CSS

#sec {
  display: inline-block;
  position: relative;
  padding-bottom: 3px;
}
#sec:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
}
#sec:hover:after {
  width: 100%;
  background: blue;
}
Clever Copperhead

Ответы похожие на “Подчеркните анимацию CSS”

Вопросы похожие на “Подчеркните анимацию CSS”

Больше похожих ответов на “Подчеркните анимацию CSS” по CSS

Смотреть популярные ответы по языку

Смотреть другие языки программирования