Apparently the problem lies in the fact that pseudo elements need their element to have content, and an input element has no content.

I do not claim to understand this because Edge and Chrome will do what we probably expect and allow pseudo elements. There is discussion of this :before && :after pseudo elements not showing Firefox 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 on a workaround.

This is to put the -moz-appearance: initial;in your stylesheet. Try the snippet. It seems to work although there are warnings in the documentation that it’s not a standard.

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/>

I am trying to make some CSS work in firefox but I cant seems to figure out why it is not working.

Should show a star when checked and an unchecked star when not checked

I have a felling it is something to do with the way firefox handles the before and after but not sure where to go with that.

It works in chrome any pointers would be very helpful.

.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/>