JSFiddle - React, Tailwind, and code Playground

by hisbvdis

HTML

<p><a href="page/1.html">Чебурашка</a></p>
 <p><a href="page/2.html">Крокодил Гена</a></p>

CSS

a {
  text-decoration: none; /* Убираем подчёркивание */
  position: relative; /* Относительное позиционирование */
  color: red; /* Цвет ссылки */
  background: linear-gradient(to right, transparent, transparent) 0 calc(100% + 5px) / 100% 1px no-repeat;
  transition: 300ms; /* Время появления линии */
  
  
}
a::after {
  /* content: ''; */ /* Выводим линию под ссылкой */
  /* position: absolute; */ /* Абсолютное позиционирование */
  /* left: 0; */ bottom: -5px; /* Положение линии */
  /* height: 1px; */ /* Высота линии */
  /* width: 100%; */ /* Линия на всю ширину ссылки */
  /* background: transparent; */ /* Прозрачный цвет */
  
  
}
}
a:hover {
  /* bottom: 0; */
  /* background: blue; */ /* Цвет линии */
  background: linear-gradient(to right, blue, blue) 0 100% / 100% 1px no-repeat;
}