<style>
    /* 初始状态：链接文本没有下划线 */
    .underline-link {
      text-decoration: none; /* 取消默认的文本下划线 */
      position: relative; /* 设置相对定位，为伪元素提供定位上下文 */
      display: inline-block; /* 让链接行为像块级元素，可以控制宽高 */
    }
    /* 创建下划线效果 */
    .underline-link::after {
      content: ''; /* 伪元素的内容为空，用于绘制下划线 */
      position: absolute; /* 绝对定位，参照父元素（即链接）的位置 */
      bottom: 0; /* 将伪元素放置在链接文本的底部 */
      left: 0; /* 从左侧开始绘制 */
      width: 100%; /* 伪元素宽度和父元素（链接）相同 */
      height: 2px; /* 设置下划线的高度 */
      background-color: black; /* 设置下划线的颜色为黑色 */
      transform: scaleX(0); /* 初始状态下，将下划线的宽度设置为 0，使其不可见 */
      transform-origin: bottom right; /* 动画的起始位置从右侧开始 */
      transition: transform 0.3s ease; /* 定义动画的过渡效果，持续 0.3 秒，使用 ease 缓动效果 */
    }
    /* 悬浮时，触发下划线动画 */
    .underline-link:hover::after {
      transform: scaleX(1); /* 当鼠标悬浮时，将下划线的宽度恢复为 100%，实现展开效果 */
      transform-origin: bottom left; /* 设置动画的结束位置为左侧，使下划线从左到右展开 */
    }
  </style>