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