我不太清楚在这个问题上使用CSS中的伪元素是什么意思，但下面是我能想到的最简单的例子：
在本例中，我们将使用classList.toggle方法在点击heart时切换pink类，如果pink类存在，该方法将删除它，如果不存在，则添加它。
为了使事情尽可能简单，我们将通过使用onclick属性添加一个内联处理程序来监听点击。该属性的值是当点击发生时您希望发生的。这里我使用一个特殊的关键字来引用当前元素this。因此，“toggle the class of pink on 'this' element”。

.star {
  font-size: 3rem;
}

.pink {
  color: deeppink;
}

<span class="star" onclick="this.classList.toggle('pink')">❤</span>

单击时，心形将变为红色，在第二个楔形上，它将返回到默认状态

const star = document.querySelector(".star")
function changeColor(){
  star.classList.toggle("selected")
}

.selected{
color: red;
}

.star{
cursor: pointer;
}

<li class="star" onClick="changeColor()" id="fav">❤</li>

<div class="title-reviews" id="favorite">
  <form name="favoriteForm" method="post" id="favoriteForm" class="favoriteForm" action="/actions/favorite.php">
    <input type="hidden" name="room_id" value="1">
    <input type="hidden" name="is_favorite" value="1">
    <div class="search_stars_div">
      <ul class="fav_star">
        <li class="star selected" id="fav">❤</li>
      </ul>
    </div>
  </form>
</div>

.selected{
color: red;
}

.star{
cursor: pointer;
color: #fff;
}

.star::before {
  color: #fff;
}

.star::after {
  color: red;
}

.star:checked {
  color: red;
}