扩展的可点击区域在Firefox

Question

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

＆＃13;

＆＃13;

button {
  background-color: darkblue;
  border-radius: 30px;
  color: #e8e8e8;
  cursor: pointer;
  font-size: 16px;
  margin: 25px 0 0 25px;
  padding: 15px;
  position: relative;
}

button::after {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  bottom: -12px;
  left: -12px;
  border-radius: 40px;
  border: 1px dotted red;
}

＆＃13;

<button>
    Go
</button>

＆＃13;

＆＃13;

＆＃13;

这适用于Chrome，Safari和Edge，但不适用于Firefox（Mac或Windows）。有什么想法吗？

Answer 1

这可以通过在按钮内使用div而不是添加伪元素

来解决

＆＃13;

＆＃13;

div {
    background-color: darkblue;
    border-radius: 30px;
    height: 30px;
    width: 30px;
    color: #e8e8e8;
    font-size: 16px;
    padding: 15px;
}
button {
    cursor:pointer;
    padding: 9px;
    border-radius: 40px;
    width: 80px;
    height: 80px;
    border: 1px dotted red;
}

＆＃13;

<button>
    <div>Go</div>
</button>

＆＃13;

＆＃13;

＆＃13;