Css 从下到上填充背景色：轻微错误

我使用了一个过渡来填充从底部到顶部的背景色。动画在这里的代码片段和codepen.io上都非常好，但是在我的网站上的文本下面有一条彩色的线。谁能告诉我为什么会这样？我在这里添加了一个截图

以下是我的代码：

.btn文本：链接， .btn文本：已访问{ 颜色：绿色； 显示：内联块； 填充：.3rem； 文字装饰：无； 字体大小：400； 背景图像：顶部线性渐变，绿色50%，透明50%； 背景大小：100%200%； 背景位置：顶部； 过渡：背景位置0.9秒放松； } .btn文本：悬停{ 背景位置：底部； 颜色：白色； }

---

您的站点模板可能有一些需要覆盖的文本装饰

在CSS中，只应用文本装饰：当应用伪元素时，对类不应用任何装饰。但是您希望将文本装饰应用于该类的所有状态：none。试试这个：

.btn-text{
  text-decoration:none;
}

---

根据模板的不同，您可能还需要添加！重要的

这是一种方法，但您也可以相对定位链接，并对该链接应用：after伪选择器，然后绝对定位到底部，初始高度设置为0，然后在悬停时填充该链接。想想这样的事情：

.link { 
  position: relative; 
}
.link:after { 
  content: '';
  position: absolute; 
  bottom:0; 
  left:0; 
  background-color: green;
  width: 100%;
  height: 0;
  z-index: -1;
  transition: height 0.3s linear;
}
.link:hover:after {
  height: 100%;
}

---

Protip：实际上，转换任何不是不透明或变换的东西都是不好的做法，但也有一些方法可以这样做，比如使用scaleY，将变换原点设置为底部，将初始高度设置为100%，但是第一个选项应该很好。

你试过属性text-decoration:none没有伪元素吗？将它添加到你的css文本decoration:none中。我试过使用text-decoration:none没有伪元素，但是它仍然不起作用，如果你不能复制它，也许可以提供一个链接来向我们展示这个问题。我把代码搞乱了，线性渐变属性似乎有一些问题，因为背景颜色向上移动的比预期的要多一点。你能共享浏览器的inspector工具中显示的元素的样式吗？如果您使用Firefox，那将是首选。