Css 扩展的可点击区域在Firefox中不起作用

由于伪元素捕获鼠标点击，我尝试使用绝对定位：：after元素为按钮创建一个扩展的可点击区域：

按钮{
背景色：深蓝色；
边界半径：30px；
颜色：#e8e8e8；
光标：指针；
字体大小：16px；
利润率：25px 0 0 25px；
填充：15px；
位置：相对位置；
}
按钮：：之后{
内容：''；
位置：绝对位置；
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
边界半径：40px；
边框：1px点红色；
}

去

这可以通过在按钮中使用

div

而不是添加伪元素来解决

div{
背景色：深蓝色；
边界半径：30px；
高度：30px；
宽度：30px；
颜色：#e8e8e8；
字体大小：16px；
填充：15px；
}
钮扣{
光标：指针；
填充：9px；
边界半径：40px；
宽度：80px；
高度：80px；
边框：1px点红色；
}

去

对于我来说，在Chrome和Firefox中的效果是一样的。你说不工作是什么意思？我在所有浏览器上都能工作。我仍然在使用firefox 56 b/c更新版本，但在ff56中，我看到了问题所在。我可以点击蓝色按钮，但不能点击蓝色按钮和红色轮廓之间的区域。也许它在更新版本的ff中起作用。它在铬合金中工作良好。在ie11中，红色轮廓没有出现。当我说它不工作时，我的意思是，在按钮外，但在红色轮廓内，单击不会触发单击事件。在展开区域中也看不到“指针”光标。在非Firefox浏览器中，将鼠标悬停在该区域会显示指针，单击该区域会触发单击事件。我用的是火狐59。非常好，谢谢你，亚当。为什么伪元素解决方案在Firefox中不起作用仍然是个谜。耸耸肩