<button>和<a> firefox bug

Question

Why is pseudo-element :before or :after doesn't have cursor pointer in firefox only in <button>? In other browsers this problem doesn't exist. In short, any element with class 'button' except <button> works fine in all browsers, including firefox.

Example: https://codepen.io/Mr_Orange/pen/djKGwY

中的伪元素

.area {
  display: flex;
}

.block {
  position: relative;
  display: block;
  width: 400px;
  height: 400px;
  background-color: lightgray;
  margin-right: 32px;
}

.button {
  display: inline-block;
  background-color: orange;
  border: 0;
  padding: 12px 24px;
  text-decoration: none;
  color: white;
  cursor: pointer;
}

.button:before {
     position: absolute;
     display: block;
     top: 40px;
     right: 40px;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background: red;
     z-index: 20;
  }

<div class="area">
  <div class="block">
    <button type="button" class="button">test</button>
  </div>
  <div class="block">
    <a href="#!" class="button">test</a>
  </div>
</div>