CSS前后

Question

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

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

我觉得这与 firefox 处理之前和之后的方式有关，但不确定该去哪里。

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

.star {
    visibility:hidden;
    font-size:30px;
    cursor:pointer;
}
.star:before {
   content: "05";
   position: absolute;
   visibility:visible;
}
.star:checked:before {
   content: "06";
   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 会做我们可能期望的事情并允许伪元素。有关于此 though some is rather out of date, the January 2020 answer from @kevinkatzke points us to the MDN documentation https://developer.mozilla.org/en-US/docs/Web/CSS/appearance 解决方法的讨论。

这是为了将 -moz-appearance: initial; 放入您的样式表中。尝试片段。它似乎可以工作，尽管文档中有警告说它不是标准的。

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

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

CSS前后

CSS before and after

html

css

firefox