html - 带有 css 内容的伪元素在 Firefox/Edge 上不显示

Question

我正在使用一个带有 CSS Psuedo 元素的复选框来显示一个元素是否被收藏。它适用于 chrome，但不适用于 mozzilla/edge 和其他一些浏览器。我需要添加或更改什么才能在其他浏览器上运行。

<input class="star favoriteStar" type="checkbox" title="bookmark page" value="781611">

.star {
    visibility: hidden;
    font-size: 30px;
    cursor: pointer;
    margin-right: 15px;
}

.star:before {
    content: "\2605";
    position: absolute;
    visibility: visible;
    margin-top: -13px;
}

.star:checked:before {
   content: "\2606";
   position: absolute;
   margin-top: -13px;
}

Answer 1

这是因为您正在尝试将伪元素应用于输入。您可能想将其更改为按钮，这可能更适合您。在这里查看这个答案:

https://stackoverflow.com/a/4660434/7520831