在 text-decoration: none 之后下划线 CSS 仍然存在 - CSS

当应用了 text-decoration: none 属性后，文本下划线通常会消失。然而，仍然有一些情况下下划线仍然存在，这是因为下划线并不只是被 text-decoration 属性控制。

情况一：链接被访问过，并且被保存到浏览器缓存中

当链接被访问过，并且被保存到浏览器缓存中时，下划线仍然可能存在，因为在缓存中，浏览器会记住链接的样式（包括下划线）。如果您想删除链接下划线，可以通过清除浏览器缓存或者设置链接样式的方法来解决。

解决方案：

• 清除浏览器缓存。
• 设置链接样式为 text-decoration: none。

a:visited {
  text-decoration: none;
}

情况二：链接被嵌套在带有下划线的元素内部

当链接被嵌套在带有下划线的元素（例如 <u> </u> 标签）内部时，即使设置了 text-decoration: none 属性，下划线也仍然存在。这是因为 CSS 属性是要根据其元素本身的样式来应用的。在这种情况下，如果您想删除链接下划线，可以把 <u> </u> 标签的样式设置为 text-decoration: none。

解决方案：

<u style="text-decoration: none">
  <a href="#">example link</a>
</u>

情况三：应用了其他下划线样式

一些 CSS 框架和库可以使用不同的下划线样式，例如单条下划线、双条下划线，虚线下划线等。这些下划线样式可以覆盖 text-decoration: none 属性。在这种情况下，如果您想删除链接下划线，可以通过把这些样式覆盖掉来解决。

解决方案：

a {
  text-decoration: none !important;
  border-bottom: none;
}

以上 CSS 代码将把边框下划线样式同时删除，即使它被其他库或框架覆盖或修改。

总之，在 CSS 中，下划线不仅由 text-decoration 属性控制。当我们遇到下划线尚未被删除时，需要检查这些属性以查找隐藏的下划线样式，并使用相应的 CSS 管理方法来解决问题。