Design et Ressources

Générateur CSS de soulignement de lien

Générez du CSS pour des soulignements animés sur les liens.

Catégorie

Design et Ressources

Générateur CSS de soulignement de lien

link hoverunderline animationcssnavigation

Sortie

Générateur de Underline Link CSS

.underline-link {
  position: relative;
  color: #0f172a;
  text-decoration: none;
  font-weight: 700;
}

.underline-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #38bdf8;
  transform-origin: left;
  transform: scaleX(0.15);
  transition: transform 0.3s ease;
}

.underline-link:hover::after {
  transform: scaleX(1);
}

En direct Aperçu

Live canvas