style.css

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.center {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* .center .stars */
.stars {
    height: 150px;
    width: 500px;
    text-align: center;
}

.stars input {
    display: none;
}

.stars label {
    float: right;                    
    font-size: 100px;
    color: lightgrey;
    margin: 0 5px;
    text-shadow: 1px 1px #bbb;
}

.stars label::before {
    content: '★';
}

.stars input:checked ~ label {
    color: gold;
    text-shadow: 1px 1px #c60;
}

.stars:not(:checked) > label:hover, 
.stars:not(:checked) > label:hover ~ label{
    color: gold;
}

.stars input:checked > label:hover, 
.stars input:checked > label:hover ~ label{
    color: gold;
    text-shadow: 1px 1px goldenrod;
} 

.result::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    font-size: 30px;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    color: gold;
    display: none;
}

.stars input:checked ~ .result::before {
    display: block;
}

.stars #five:checked ~ .result::before {
    content: "I love it 😍";
}
.stars #four:checked ~ .result::before {
    content: "I like it 🤪";
}
.stars #three:checked ~ .result::before {
    content: "It's good 😎";
}
.stars #two:checked ~ .result::before {
    content: "I don't like it 🥱";
}
.stars #one:checked ~ .result::before {
    content: "I hate it 😠";
}