使用::before和::after实现边框后内部链接无法点击的问题求助

嘿，这个坑我之前踩过！你遇到的问题核心原因是：::before和::after伪元素默认会堆叠在原元素内容的上方，相当于给你的链接盖了一层“透明遮罩”，导致点击事件被伪元素拦截，根本传不到链接上。不过别担心，只要一行CSS就能解决，还能保留你想要的边框效果。

最通用的解决方案：用z-index把伪元素放到内容下方 #

伪元素的堆叠顺序是可以调整的，只要给它们设置z-index: -1，同时确保父元素（也就是你的.text）设置了position: relative（因为z-index只对定位元素生效）。这样伪元素就会跑到内容的下层，既不会挡住链接，边框效果也能正常显示。

修改后的CSS代码示例：

.text {
  position: relative; /* 必须添加，让伪元素的定位基于这个父元素 */
  padding: 1.5rem; /* 给边框留出空间，避免内容贴到边框上 */
}

.text::before, .text::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
  border: 2px solid #2c3e50; /* 你的边框样式 */
  z-index: -1; /* 关键：把伪元素放到内容下方 */
}

额外注意事项 #

• 如果你的.text元素设置了背景色，要确保背景色是透明的（比如background-color: transparent），不然会把下层的伪元素边框挡住，看不到效果。
• 如果你的伪元素是用来做不对称边框（比如只有左边和下边有框），这个方法同样适用，只要调整伪元素的尺寸和定位就行，z-index的逻辑不变。

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