无法弄清楚如何删除文本装饰答案

【问题标题】：Can't figure out how to remove text-decoration on无法弄清楚如何删除文本装饰
【发布时间】：2015-01-25 18:04:48
【问题描述】：

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

当我将鼠标悬停在标题元素上时，我有一个细小的边框，看起来很像文本装饰边框，我无法摆脱它。

据我所知，这个问题无法用 text-decoration: none; 解决……它就是行不通或者我在错误的元素上应用了它……然后，我想我已经全部测试过了……这就是我在这里发布我的问题的原因。

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

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

由于我不确切知道我的代码问题出在哪里，所以我在运行了一个实时示例。在过去的几个小时里，我使用网络检查器对其进行了调试，但无法确定这里有什么问题。我几乎在任何地方都放置了text-decoration: none !important，但没有成功。

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

更新：为了避免混淆，我将添加了伪 ::before 元素的人造边框删除到 span 中。待此问题解决后，我将添加它。我还使用这个使 html 更具语义：

【问题讨论】：

贴出的代码并没有出现文字和图片描述的现象，外观与图片相差较大。由于display: inline-block，第一个h1 缺少下划线，这会阻止封闭元素的下划线应用于它。如果问题仍然存在，请发布实际演示它们的 HTML 和 CSS 代码（最好最小化，以便它有足够的代码来触发问题）。
@jukka-k-korpela 我添加了一个 MWE，但它并没有太大帮助，因为那里没有出现问题。我更新了现场演示并删除了 inline-block 并编写了一个更具语义的 html 块（请参阅 MWE）。尽管如此，我还是无法调试代码，也无法找到并提取不需要的 css 规则。
在线代码调试请求与 SO 无关。您应该隔离问题，以便您可以发布问题实际发生的最小情况的代码。
好的。我会尝试自己解决这个问题，并在今晚回答或删除问题。

标签： css border text-decorations

【解决方案1】：

我已经检查了您网站的实时版本，如果您禁用 ::before css 的 content: css 属性，该行就会消失。

【讨论】：

如果您禁用内容，整个 before 块将消失……它最初是为粗体人造边框创建的。我想摆脱的是细线。我明白为什么这会令人困惑，所以我更新了示例 + 演示页面并删除了那里的 ::before 元素。

【解决方案2】：

将 a href 包裹在两个 h1 标记周围是不好的标记做法。改写成这样：

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

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

【讨论】：

我做了一些改变，使它更具语义化（避免双 h1 标签）。所以，谢谢你的指点。我选择在 a 标签内包装标题和跨度。但是，这绝对不是解决方案，因为这不是语义问题。在任何时候，我都能够针对特定元素。我仍然无法找出不需要的行为来自哪里，这是这里的主要问题。浏览器的网络检查器也没有救我。我一无所知。

【解决方案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);。我会重写它以更顺利地工作。但是……这是罪魁祸首。

感谢大家抽出宝贵时间。

【讨论】：