Question

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

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

据我所知，这个问题无法用text-decoration: none;来解决......它只是不会工作或者我在错误的元素上应用它...... / em>然后再次，我想我已经测试了所有...这就是为什么我在这里发布我的问题。

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

MWE工作得很好（http://codepen.io/pattulus/pen/bNRxaz），但真实的东西不是。

由于我不确切地知道问题的确切位置，因此我有一个在运行的实时示例。我在最后几个小时用网络检查员对它进行了调试，但无法确定这里的内容。我几乎在任何地方放置text-decoration: none !important都没有成功。

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

更新：我将带有伪::before元素的伪边框放到了跨度上以避免混淆。我将在以后解决此问题时添加它。我还使用这个来使html更加语义化：

Answer 1

我已经查看了您网站的实时版本，如果您禁用了:: before css之前的内容：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);。我会重写它以更顺利地工作。但是......这是罪魁祸首。

感谢大家抽出时间。

无法弄清楚如何删除文字装饰

3 个答案: