链接悬停背景动画效果异常：CSS实现与示例不符求排查

你的CSS存在两处关键问题，无需额外编写JS代码就能实现目标效果：

• hover触发对象错误
  你当前是给h3元素绑定hover状态，但实际应该是鼠标悬停在整个链接（a.headline）上时，让内部的h3产生效果。修改hover选择器：

  a.headline:hover h3 {
      background-size: 100% 100%;
  }
  

• 渐变背景的定位与范围未设置
  原代码未指定渐变的位置和作用范围，导致效果与示例不符。补充相关属性后的完整CSS：

  a.headline h3 {
      color: $body-color;
      background-repeat: no-repeat;
      background-image: linear-gradient(transparent 50%, rgb(228, 227, 255));
      background-size: 0% 100%;
      background-position: left bottom;
      background-origin: content-box; /* 确保渐变仅覆盖文字区域 */
      will-change: background-size;
      transition: background-size 0.3s ease-in-out;
      display: inline; /* 若h3为块级元素，改为inline让下划线跟随文字宽度 */
  }
  
  a.headline:hover h3 {
      background-size: 100% 100%;
  }
  

最后检查HTML结构，确保h3是a.headline的直接子元素，避免选择器匹配失败。

内容的提问来源于stack exchange，提问作者Cray