纯HTML/CSS网站鼠标悬停时出现两条异常线条，如何消除？

架构老林

2026-4-30

解决鼠标悬停出现异常线条的问题

我帮你分析了这个网站的CSS代码，找到问题根源啦——是链接元素(<a>)的hover状态下的伪元素::before和::after在搞事情，这两个伪元素被设置为显示两条线条，所以鼠标悬停时就会冒出来。下面给你两种解决方案：

方法一：彻底移除所有链接的hover线条
打开你的style.css文件，找到这段代码（类似这样的结构）：

a:hover::before,
a:hover::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #your-color;
  /* 还有left、top之类的定位属性 */
}

直接删除整个代码块就行，之后所有链接鼠标悬停时都不会再出现那两条奇怪的线条了。

方法二：只禁用特定链接的hover线条
要是你想保留部分链接的这个效果，只去掉特定链接的异常线条，可以这么做：
1. 在CSS末尾添加这段代码：
```
.no-hover-line:hover::before,
.no-hover-line:hover::after {
  display: none;
}
```
1. 在HTML里给不需要线条的链接加上no-hover-line类，比如：
```
<a href="your-link-url" class="no-hover-line">你的链接文本</a>
```