style.css 618 B

123456789101112131415161718192021
  1. .hover-underline-gradient {
  2. z-index: 1;
  3. }
  4. .hover-underline-gradient::after {
  5. content: '';
  6. display: block;
  7. width: 0; /* 在 hover 之前宽度为 0 */
  8. height: 80%;
  9. background-image: linear-gradient(to right, theme('colors.gradientL'), theme('colors.gradientR')); /* 渐变背景 */
  10. border-radius: 10px; /* 设置为 full rounded corners */
  11. transition: width 0.3s ease-in-out; /* 过渡效果 */
  12. position: absolute;
  13. bottom: -10px;
  14. z-index: -1;
  15. margin: 0 auto;
  16. /* clip-path: inset(50% 0 0 0); */
  17. }
  18. .hover-underline-gradient:hover::after {
  19. width: 90%; /* hover 时宽度为元素的 100% */
  20. }