Incorrect rendering of pseudo-element before

I have such an element on vue:

    <div class="container">
        <div class="rating">
          <input type="radio" id="star5" name="rating" value="5" /><label
            for="star5"
            class="full"
            title="Awesome"
          ></label>
          <input type="radio" id="star4.5" name="rating" value="4.5" /><label
            for="star4.5"
            class="half"
          ></label>
          <input type="radio" id="star4" name="rating" value="4" /><label
            for="star4"
            class="full"
          ></label>
          <input type="radio" id="star3.5" name="rating" value="3.5" /><label
            for="star3.5"
            class="half"
          ></label>
          <input type="radio" id="star3" name="rating" value="3" /><label
            for="star3"
            class="full"
          ></label>
          <input type="radio" id="star2.5" name="rating" value="2.5" /><label
            for="star2.5"
            class="half"
          ></label>
          <input type="radio" id="star2" name="rating" value="2" /><label
            for="star2"
            class="full"
          ></label>
          <input type="radio" id="star1.5" name="rating" value="1.5" /><label
            for="star1.5"
            class="half"
          ></label>
          <input type="radio" id="star1" name="rating" value="1" /><label
            for="star1"
            class="full"
          ></label>
          <input type="radio" id="star0.5" name="rating" value="0.5" /><label
            for="star0.5"
            class="half"
          ></label>
        </div>
      </div>

But the pseudo element before, which is responsible for half of the star, is not displayed correctly (I put a bracket, but if you try to put half of the star, an empty square is displayed):

SCSS:

.rating > label:before {
  content: "\2605";
  font-family: FontAwesome;
  margin: 5px;
  font-size: 1.5rem;
  display: inline-block;
  cursor: pointer;
}

.rating > .half:before {
  content: "(";
  position: absolute;
  cursor: pointer;
}

At the same time, this element works fine on pure html css:

CSS:

.rating > label:before{
    content: '\f005';
    font-family: FontAwesome;
    margin: 5px;
    font-size: 1.5rem;
    display: inline-block;
    cursor: pointer;
}

.rating > .half:before{
    content: '\f089';
    position: absolute;
    cursor: pointer;
}

The element of the whole star that is used in css for some reason does not work in scss, what could be the reason for this?