Анимация подчеркивания на чистом CSS

Простой CSS сниппет для осуществления анимации подчеркивания текста при наведении мыши. Такой hover эффект часто используется для элементов навигации и различных кнопок.

<button class="underline-me">Underline Me</button>

.underline-me {
  background-image: linear-gradient(
    transparent 0%,
    transparent 90%,
    hotpink 90%,
    hotpink 100%
  );
  
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position-x: right;
  transition: background-size 300ms;
  border: none;
  background-color: #180f0f;
  color: white;
  padding: 15px;
  display: flex;
  cursor: pointer;
  border-radius: 5px;
}

.underline-me:hover {
  background-size: 100% 100%;
  background-position-x: left;
}