为何添加自定义CSS后WordPress Mikado主题按钮链接失效

链接点击失效是CSS层级设置错误导致的元素遮挡，和Mikado主题本身无关：

• 你为.wp-block-button定义的::before伪元素设置了position: absolute和z-index: 3，且高度为100%，会完整覆盖整个按钮区域；
• 按钮内部真正承载跳转逻辑的<a>标签没有设置定位属性和z-index，层级低于伪元素，鼠标点击时实际触发的是上层透明的伪元素，无法命中下方的链接，最终表现为跳转失效。
  另外你的CSS存在重复定义规则的冗余问题：两次声明.wp-block-button基础样式、两次声明hover状态下的::before样式、重复写transition属性，不会影响功能但会增加代码维护成本。

优先选择改动最小的方案：给伪元素添加pointer-events: none属性，让伪元素不拦截任何鼠标事件，点击动作会直接穿透到下层的链接元素。
修复后的完整CSS代码如下，已经合并了冗余规则：

.wp-block-button {
  position: relative;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 20px 20px;
  cursor: pointer;
  transition: 0s;
  background-color: transparent!important;
  border-color: transparent!important;
  color: #000000!important;
}

.wp-block-button:before {
  width: 0%;
  height: 100%;
  z-index: 3;
  content: '';
  position: absolute;
  bottom: .1em;
  left: 2em;
  box-sizing: border-box;
  border-bottom: 3px solid #59629a!important;
  transition: 0s;
  /* 新增下方属性解决点击遮挡问题 */
  pointer-events: none;
}

.wp-block-button:hover:before {
  width: 80% !important;
  transition-delay: 0s;
}

如果不想用pointer-events属性，也可以选择抬升链接元素的层级，在原有CSS里追加如下规则即可：

.wp-block-button .wp-block-button__link {
  position: relative;
  z-index: 4;
}

额外提示：你给外层.wp-block-button设置的固定height:20px和padding:20px 20px组合容易引发布局错位，默认盒模型下元素实际总高度为60px，内部文字可能出现偏移，可根据实际显示效果将高度调整为auto适配内容。

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