侧边栏伪元素导致内部<a>标签无法点击的解决方法

这个问题我之前也碰到过！原因很简单——你添加的:before伪元素是绝对定位的，它会完全覆盖在.sidebar.sidebar-main容器的上方，把里面的<a>标签给挡住了，所以点击事件根本没法触发到链接上。

给你几个实用的解决办法，按优先级推荐：

方法一：让伪元素忽略鼠标事件（最推荐） #

给伪元素添加pointer-events: none;属性，这样它就不会拦截任何鼠标交互，点击、hover等事件会直接穿透到下面的链接元素上：

.sidebar.sidebar-main:before {
  content: '';
  position: absolute;
  left: 0;
  right: 22px;
  border: solid 1px #dae2e6;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  pointer-events: none; /* 新增这行代码 */
}

这个方法最简单直接，完全不影响伪元素的视觉效果，只是让它“透明”于鼠标交互。

方法二：把伪元素放到内容下方 #

如果伪元素只是用来做边框或背景装饰，可以调整它的层级，让它处于父容器内容的下方：
首先给父容器设置相对定位（确保z-index生效），然后给伪元素设置z-index: -1;：

.sidebar.sidebar-main {
  position: relative; /* 父元素需要相对定位作为基准 */
}
.sidebar.sidebar-main:before {
  content: '';
  position: absolute;
  left: 0;
  right: 22px;
  border: solid 1px #dae2e6;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  z-index: -1; /* 将伪元素置于内容层下方 */
}

这样伪元素就不会挡住上面的链接了，适合你不需要伪元素响应鼠标事件的场景。

方法三：调整伪元素尺寸避开点击区域 #

如果前两种方法不适用，你可以手动调整伪元素的top、bottom、left、right值，让它不覆盖到<a>标签的可点击区域。不过这种方法灵活性差，后续布局变动时需要重新调整，一般不推荐。

内容的提问来源于stack exchange，提问作者Hunter