WordPress站点链接下划线无法去除：text-decoration:none无效求助

嘿，我明白你为啥头疼了——试过这么多选择器和属性还搞不定下划线，大概率是你的WordPress主题在用伪元素偷偷给链接加下划线！这种情况非常常见，尤其是现代主题，它们不会用原生的text-decoration，而是靠::after或::before伪元素模拟下划线，所以你之前的text-decoration:none根本管不到它。

给你几个针对性的解决方法：

• 先排查伪元素（关键！）：按下F12打开浏览器开发者工具，找到你的.buttonL或.buttonR链接元素，在右侧样式面板里查看有没有::after或::before伪元素的样式——比如有没有设置border-bottom、background、height这类用来模拟下划线的属性。如果有，那就是它在搞鬼！

• 干掉伪元素的下划线样式：如果找到了伪元素，直接给它加上这些CSS：

  .buttonL::after, .buttonR::after,
  .buttonL::before, .buttonR::before {
    border-bottom: none !important;
    content: none !important; /* 如果伪元素是用content生成的下划线，这行能直接移除它 */
    box-shadow: none !important;
  }
  

• 覆盖所有链接状态：有时候主题会给链接的不同状态（比如hover、visited）单独设置下划线，你可以一次性覆盖所有状态：

  .buttonL:link, .buttonL:visited, 
  .buttonL:hover, .buttonL:active,
  .buttonR:link, .buttonR:visited, 
  .buttonR:hover, .buttonR:active {
    text-decoration: none !important;
    border-bottom: none !important;
  }
  

• 提升选择器优先级（备选方案）：如果还是没效果，试试用更具体的选择器，让你的CSS优先级超过主题样式，比如结合父元素p：

  p a.buttonL, 
  p a.buttonR {
    text-decoration: none !important;
    border-bottom: none !important;
  }
  

按照这个思路来，应该能彻底干掉那些顽固的下划线！

内容的提问来源于stack exchange，提问作者Ciarán J. Hagen