WordPress自定义按钮hover状态修改失败，before伪类无法正常生效

错误原因 #

• 按钮before伪类缺少position: absolute属性：top/right/bottom/left定位属性仅对非static定位的元素生效，缺少该属性会导致伪类无法正常渲染，无法贴合按钮尺寸生成背景层。
• 按钮本身未设置position: relative：伪类的绝对定位会默认相对于页面根节点或者外层已设置定位的父元素生效，只有给按钮本身加相对定位，才能让伪类的定位以按钮边框为基准。
• hover选择器指向错误：你写的.et_pb_button_0_wrapper:hover:before是选中外层容器的伪类，不是选中按钮的伪类，因此hover时样式不会作用到按钮背景上。

修正后的CSS代码 #

/* 首先给按钮本身加相对定位，作为伪类的定位基准 */
.et_pb_button_module_wrapper .et_pb_button {
    position: relative;
    z-index: 1; /* 确保按钮文字在伪类上方 */
}

/* 按钮默认态伪类样式，补全position:absolute */
.et_pb_button_module_wrapper .et_pb_button:before {
    content: "";
    background: #FF0033;
    border: solid 2px #FF0033;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: all 500ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

/* 外层容器hover时，修改内部按钮的伪类样式，避免整个容器触发效果 */
.et_pb_button_0_wrapper:hover .et_pb_button:before {
    background: #b30024;
    border-color: #b30024;
}

生效验证 #

将上述代码替换你之前添加的自定义CSS即可，修改后伪类会正常贴合按钮尺寸生成背景，hover时只会修改按钮背景色，不会影响外层容器样式。

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