:after elements don't respond on hover or click

August 3, 2022

This is my code in which I want to do a simple star rating using JavaScript HTML and CSS.

var numbersDiv = document.getElementById("23");
var aa = document.createElement("div");
aa.className = "rating";
for (let i = 0; i < 5; i++) {
  var tempStar = document.createElement("input");
  tempStar.setAttribute("type", "radio");
  tempStar.setAttribute("name", "star");
  var tempStarId = "star" + i;
  tempStar.id = tempStarId;
  var tempLabel = document.createElement("label");
  tempLabel.setAttribute("for", tempStarId);
  aa.appendChild(tempStar);
  aa.appendChild(tempLabel);
}
numbersDiv.appendChild(aa);

.rating {
  display: flex;
}

.rating input {
  display: none;
}

.rating label {
  display: block;
  cursor: pointer;
  width: 50px;
  background: #ccc;
}

.rating label:before {
  content: "★";
  position: relative;
  font-family: fontAwesome;
  display: block;
  font-size: 50px;
  color: #101010;
}

.rating label:after {
  content: "★";
  position: absolute;
  font-family: fontAwesome;
  display: block;
  font-size: 50px;
  color: #1f9cff;
  top: 0;
}

.rating label:hover:after,
.rating label:hover~label:after,
.rating input:checked~label:after {
  opacity: 1;
}

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" rel="stylesheet" />
</head>

<body>
  <div id="23"></div>

</body>

</html>

There are several problems:

The after stars are slightly above the before stars
When I am clicking, the after stars don’t work as they should.
(How should they work: When I click on a black star, it becomes blue)

I saw this code from the internet but for some reason it just won’t work. Does anyone know how to fix this issue?

(Just for the record, the video which I saw online is this one: https://www.youtube.com/watch?v=Ep78KjstQuw)

>Solution :

You were missing 2 important CSS-Options:

Your Label needs to be position: relative; as the Stars will be positioned inside the label relative to the coordinates of the label.
The missing position: relative; caused the stars to align to the body element and therefore at the top of the page.
You stars never had the opacity: 0; set, therefore are always visible.

var numbersDiv = document.getElementById("23");
var aa = document.createElement("div");
aa.className = "rating";
for (let i = 0; i < 5; i++) {
  var tempStar = document.createElement("input");
  tempStar.setAttribute("type", "radio");
  tempStar.setAttribute("name", "star");
  var tempStarId = "star" + i;
  tempStar.id = tempStarId;
  var tempLabel = document.createElement("label");
  tempLabel.setAttribute("for", tempStarId);
  aa.appendChild(tempStar);
  aa.appendChild(tempLabel);
}
numbersDiv.appendChild(aa);

.rating {
  display: flex;
}

.rating input {
  display: none;
}

.rating label {
  /* Added Position Relative*/
  position: relative;
  display: block;
  cursor: pointer;
  width: 50px;
  background: #ccc;
}

.rating label::before {
  content: "★";
  position: relative;
  font-family: fontAwesome;
  display: block;
  font-size: 50px;
  color: #101010;
}

.rating label::after {
  content: "★";
  position: absolute;
  font-family: fontAwesome;
  /* Set default Opacity to 0*/
  opacity: 0;
  display: block;
  font-size: 50px;
  color: #1f9cff;
  top: 0;
}

.rating label:hover::after,
.rating label:hover~label::after,
.rating input:checked~label::after {
  opacity: 1;
}

<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/fontawesome.min.css" rel="stylesheet" />
</head>

<body>
  <div id="23"></div>

</body>

</html>