【问题标题】：Cannot click on ::after on Firefox无法在 Firefox 上点击 ::after
【发布时间】：2019-01-10 18:37:14
【问题描述】：

我有一个 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（之后）创建的按钮。将鼠标悬停在 Chrome 上时可以单击它，但在 Firefox 上则不能。有什么想法吗？

火狐版本：64.0

链接：https://codepen.io/anon/pen/zymvPj（请使用火狐测试）。

【问题讨论】：

查看此链接stackoverflow.com/questions/26426734/…
谢谢@danielarend。我认为它适用于 IE 而不是 Firefox。
当我点击它时会发生什么？我在 chrome 上单击它，没有任何反应
它的作用就像 Firefox 不会从中传播任何事件。 :after 元素上的left: calc(100% - 2em); 会将其推到按钮的“点击区域”之上。在这种情况下，不是解决方案，而是解决方法。
如果您不希望用户单击所有选择文本，则不要将其设为按钮，而是将其设为按钮，然后禁用指针事件。这是反直觉的

标签： javascript html css

【解决方案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>

【讨论】：

【解决方案2】：

Font-Awesome 5 - 伪元素

免费实体版要求

在<head> 标签中有这个：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

In your stylesheet:

.icon::after {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.arrow::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

content 属性需要Unicode 而不是>

这两个类名是任意的，但要确保它们在同一个标签上：

<button class='icon arrow'></button>

绝对定位

Font-Awesome（或缺少字体）不是问题，但我必须解决房间里的大象问题。无论如何，left:100% 将部分推出按钮边框，看起来 Firefox 将伪元素视为它不属于按钮，而 Chrome 显然记得。解决方法很简单：删除left:100%并添加right:0

演示

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;
}

.icon::after {
  background: #FFF;
  border: 1px solid #e6e6ed;
  color: #f8971d;
  font-size: 12px;
  line-height: 2.7;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  height: calc(100% + 1px);
  right: 0;
  position: absolute;
  text-align: center;
  top: -1px;
  width: 2em;
  cursor: pointer;
}

button#groupToggle::after {
  content: '\f105';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

<button id="groupToggle" class='icon'>
  <span>All selected</span>
</button>

【讨论】：

谢谢@zer00ne。您的解决方案也适用于 Firefox。
没问题，@DaleNguyen 编码快乐。