之前和之后的 CSS

Question

我正在尝试让一些 CSS 在 Firefox 中工作，但我似乎无法弄清楚为什么它不起作用。

选中时应显示星号，未选中时应显示未选中星号

我有一种感觉，这与 Firefox 处理前后的方式有关，但不知道该去哪里。

它适用于 chrome 任何指针都会非常有帮助。

.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "\2605";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "\2606";
   position: absolute;
}

  <input class="star" type="checkbox" title="bookmark page"><br/><br/>
  <input class="star" type="checkbox" title="bookmark page" checked><br/><br/>

Answer 1

显然问题在于伪元素需要它们的元素有内容，而输入元素没有内容。

我并没有声称自己理解这一点，因为 Edge 和 Chrome 会做我们可能期望的事情并允许使用伪元素。对此:before && :after pseudo elements not showing Firefox 进行了讨论，尽管有些已经过时，但@kevinkatzke 2020 年 1 月的回答将我们指向 MDN 文档https://developer.mozilla.org/en-US/docs/Web/CSS/appearance 的解决方法。

这是为了将-moz-appearance: initial;放入您的样式表中。试试sn-p。尽管文档中有警告说它不是标准，但它似乎有效。

input[type=checkbox] {
  -moz-appearance:initial;
}
.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "\2605";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "\2606";
   position: absolute;
}

<input class="star" type="checkbox" title="bookmark page"><br/><br/>
<input class="star" type="checkbox" title="bookmark page" checked><br/><br/>