javascript - 无法在 Firefox 上点击::之后

Question

我有一个 HTML 和 CSS 代码，它在 Chrome 上运行良好。但是，在 Firefox 上，行为有所不同。

button#groupToggle {
    background: 0 0;
    border: 1px solid #e6e6ed;
    color: #222;
    float: none;
    margin: 0 0 0 6px;
    min-width: 200px;
    padding: 8px 10px;
    position: relative;
    text-align: left;
    cursor: pointer;
}

button#groupToggle::after {
    background: #FFF;
    border: 1px solid #e6e6ed;
    color: #f8971d;
    content: '>';
    display: inline-block;
    font: 900 12px/2.1 'Font Awesome 5 Free';
    height: calc(100% + 1px);
    left: 100%;
    position: absolute;
    text-align: center;
    top: -1px;
    width: 2em;
    cursor: pointer;
    border: ;
}

<button id="groupToggle">
  <span>All selected</span>
</button>

在All Selected之后，有一个按钮是通过伪CSS创建的(after)。在 Chrome 上悬停时可以单击它，但在 Firefox 上不能单击。有什么想法吗？

火狐版本:64.0

链接:https://codepen.io/anon/pen/zymvPj (请使用Firefox进行测试)。

Answer 1

实际上没有办法让它的行为方式与在 Chrome 中一样。 :after 和 :before 不会被 Firefox 视为 DOM 元素。但是，您可以稍微作弊。改变所有浏览器的行为。这是我的解决方案建议，看起来和您想要的一样。

button#groupToggle {
    background: 0 0;
    border: 1px solid #e6e6ed;
    color: #222;
    float: none;
    margin: 0 0 0 6px;
    min-width: 224px;
  /* increased by 24px (after width) */
    padding: 8px 10px;
    position: relative;
    text-align: left;
    cursor: pointer;
    z-index: 0;
}

button#groupToggle::after {
    background: #FFF;
    border: 1px solid #e6e6ed;
    color: #f8971d;
    content: '>';
    display: inline-block;
    font: 900 12px/2.1 'Font Awesome 5 Free';
    height: calc(100% + 1px);
    position: absolute;
    text-align: center;
    top: -1px;
    width: 2em;
    position: absolute;
    cursor: pointer;
    border: ;
    right: -1px; 
    /* -1px to neutralize border */
}

/* ONLY TO SHOW IT WORKING */
button#groupToggle:focus {
   outline: red solid 10px;
   -moz-outline: red solid 10px
}
  

<button id="groupToggle">
  <span>All selected</span>
</button>