Animated Underline on Hover

/* Slide from left */
.underline-left {
  position: relative;
  text-decoration: none;
  color: inherit;
}

.underline-left::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3a7bff, #8b5cf6);
  transition: width 0.3s ease;
}

.underline-left:hover::after {
  width: 100%;
}

/* Slide from center */
.underline-center {
  position: relative;
  text-decoration: none;
}

.underline-center::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #3a7bff;
  transition: all 0.3s ease;
}

.underline-center:hover::after {
  left: 0;
  width: 100%;
}

/* Highlight effect */
.underline-highlight {
  background: linear-gradient(transparent 60%, rgba(58, 123, 255, 0.3) 60%);
  transition: background 0.3s ease;
}

.underline-highlight:hover {
  background: linear-gradient(transparent 60%, rgba(58, 123, 255, 0.6) 60%);
}