不知道如何删除 text-decoration

Question

更新 2： 问题不再相关，因为它无法通过 MWE 离线示例解决。（我还发现了导致该错误的违规代码。

当鼠标悬停在 header 元素上时，我有一个细小的边框，看起来很像 text-decoration 边框，我无法摆脱它。

据我所知，这个问题不能用text-decoration: none;解决…它根本行不通或者我应用错了element… 再一次，我想我已经测试了所有这些…这就是为什么我在这里发布我的问题。

text-decoration: "none" http://oho.xyz/hover1.jpg

MWE 工作正常(http://codepen.io/pattulus/pen/bNRxaz)，但真实情况并非如此。

由于我不知道我的代码到底出了什么问题，所以我在上有一个实例运行。我用网络检查器调试了最后几个小时，但不能 pin-point 这里有什么问题。我几乎到处都放了一个 text-decoration: none !important 但没有成功。

所以他们真正的问题是：这个错误是什么以及如何找到它？

更新：为了避免混淆，我将添加了伪 ::before 元素的 faux-border 删除了。等这个问题解决了我再补充。我还使用这个使 html 更具语义：

Answer 1

我查看了您网站的实时版本，如果您禁用内容：css 属性您的 ::before css，该行将消失。

Answer 2

将 href 包裹在两个 h1 标签周围是不好的标记做法。像这样重写：

<h1><a href=#">Some title<span>sub title text</span></a></h1>

更改您的 css 以反映新的 html 更改，您将能够更好地控制行为。

Answer 3

在我的示例中，我有一个混合，我在全局调用它以在所有标签下划线：

@mixin hoverbottom($width: 2px, $style: solid, $color: $orangey-red) {
  &:hover {
    @include transition($link-transition);
    border-bottom: $width $style $color;
  }
}

由于 mixin 的编写方式不巧妙，我不能简单地说 border-bottom: none，但需要 @include hoverbottom (0px, solid, transparent);。我会重写它以更顺利地工作。但是……这就是罪魁祸首。

感谢大家抽出时间。

不知道如何删除 text-decoration

Can't figure out how to remove text-decoration on

css

border

text-decorations