html - CSS :after content and absolute position for button makes it not clickable

Question

我正在使用 Ionic 框架开发移动应用程序，并使用 Ripple 模拟器对其进行测试。我不能点击按钮。我认为这个问题伴随着 Chrome 更新，但我不确定。我已将问题归结为默认 ionic.css 中的以下 css:

  .button:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' '; }

问题可以很容易地产生如下:

<button class="button">hello</button>

请参阅http://codepen.io/anon/pen/bNXpaV

这似乎是由设置的位置和内容属性的某些相互作用引起的。我可以通过删除 content: ' ' 或在第二个 css block 中设置 content: normal 来解决问题(我不想修改 ionic.css 源) ....但为什么会这样？

Answer 1

因为 :after 内容跨越了整个页面。如果您将 background: red 添加到 CSS，您就会理解我的意思。

当一个元素是position: absolute时，topleftright和bottom 坐标相对于具有指定 position 属性的最近的父级。在这种情况下，父元素是 body。

默认情况下，指针事件不会通过伪元素，这就是为什么您不能通过叠加层单击按钮的原因(我希望这具有直观意义)。

尝试将 pointer-events: none 添加到 :after。您现在应该能够单击按钮，即使它位于红色 block 下方，因为 none 告诉浏览器忽略 :after 伪元素上的指针事件。

.button:after {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: -6px;
    content: ' ';
    background: red;
    pointer-events: none;
}   

(参见 http://codepen.io/anon/pen/GgVZxV)