按钮获焦时:hover:active::before样式无法生效的技术咨询

我使用如下CSS选择器给按钮添加交互样式：

button:hover:active::before{
content: "",
// button active overlay styles
}
button:hover::before{
content: "",
// button hover overlay styles
}

按钮未聚焦时，hover和active状态都正常生效；但通过Tab键让按钮获焦后，hover样式能正常应用，active状态样式却无法触发。希望实现按钮获焦时，按下Enter/Space键仍能应用active状态的样式。

:hover:active 这个组合选择器仅匹配「鼠标悬停在元素上，同时触发active状态（比如鼠标点击）」的场景。当通过Tab键聚焦按钮后，此时元素处于:focus状态而非:hover状态，按下Enter/Space触发active时，无法匹配到:hover:active的选择器，所以样式不生效。

需要补充针对:focus:active场景的选择器，将两种交互场景（鼠标点击、键盘触发）都覆盖到：

/* 鼠标悬停+点击的场景 */
button:hover:active::before{
content: "";
/* button active overlay styles */
}
/* 键盘聚焦+触发active的场景 */
button:focus:active::before{
content: "";
/* 可复用和hover:active一致的样式，也可单独定义 */
}
/* 原hover样式保留 */
button:hover::before{
content: "";
/* button hover overlay styles */
}

如果两种场景的active样式完全一致，也可以合并成一个选择器简化代码：

button:hover:active::before,
button:focus:active::before{
content: "";
/* button active overlay styles */
}

这样不管是鼠标操作还是键盘聚焦后的触发，active状态的样式都能正常生效。

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