为什么在Google Chrome浏览器中无法点击该伪元素？

Question

我今天遇到了一个仅影响Google Chrome的问题。在几个月前开发和测试功能之前，我还没有注意到它，所以我认为这可能是一个新错误。

在下面的代码中，单击蓝色框不会激活该复选框。如果标签的显示值为inline-block和/或除去了边距，则可以使用。为什么？

label {
  margin-left: 30px;
}

input+label:before {
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid blue;
  margin-left: -30px;
  margin-right: 20px;
  vertical-align: middle;
}

input:checked+label:before {
  content: 'X';
}

input {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

<input type="checkbox" id="a">
<label for="a">Label text</label>

编辑：我正在使用Google Chrome版本73.0.3683.86（正式版本）（64位）。

链接的问题是在2011年提出的，显然是一个错误。但是现在是2019年，直到最近一直有效。