HTML

<div class="demo-container d-flex justify-content-center">
<form action="" method="post"> 
<div class="radio-buttons-container">
<input type="radio" id="star_5" name="stars" value="5" <?=$_POST['stars']=="5" ? "checked" : ""?> />
<label for="star_5" title="Awesome"></label>
<input type="radio" id="star_4.5" name="stars" value="4.5" <?=$_POST['stars']=="4.5" ? "checked" : ""?> />
<label for="star_4.5" class="half"></label>
<input type="radio" id="star_4" name="stars" value="4" <?=$_POST['stars']=="4" ? "checked" : ""?> />
<label for="star_4"></label>
<input type="radio" id="star_3.5" name="stars" value="3.5" <?=$_POST['stars']=="3.5" ? "checked" : ""?> />
<label for="star_3.5" class="half"></label>
<input type="radio" id="star_3" name="stars" value="3" <?=$_POST['stars']=="3" ? "checked" : ""?> />
<label for="star_3"></label>
<input type="radio" id="star_2.5" name="stars" value="2.5" <?=$_POST['stars']=="2.5" ? "checked" : ""?> />
<label for="star_2.5" class="half"></label>
<input type="radio" id="star_2" name="stars" value="2" <?=$_POST['stars']=="2" ? "checked" : ""?> />
<label for="star_2"></label>
<input type="radio" id="star_1.5" name="stars" value="1.5" <?=$_POST['stars']=="1.5" ? "checked" : ""?> />
<label for="star_1.5" class="half"></label>
<input type="radio" id="star_1" name="stars" value="1" <?=$_POST['stars']=="1" ? "checked" : ""?> />
<label for="star_1"></label>
<input type="radio" id="star_0.5" name="stars" value="0.5" <?=$_POST['stars']=="0.5" ? "checked" : ""?> />
<label for="star_0.5" class="half"></label>
</div> 

<div class="container my-3">
<div class="col-md-12 text-center">
<input class="btn btn-primary" type="submit" name="submit" value="Submit">
</div>
</div>
</form>
</div>

CSS

.demo-section {
margin: 0 auto;
padding-top: 2em;
max-width: 300px;
}

.demo-container {
padding: 1em;
background-image: linear-gradient(to top, #ececec 0%, #ffffff 100%);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
} 

.radio-buttons-container {
display: inline-block;
border: 0;
color: #8E8B8B;
}
.radio-buttons-container > input {
display: none;
}
.radio-buttons-container > label {
float: right;
}
.radio-buttons-container > label:before {
display: inline-block;
font-family: FontAwesome;
font-size: 1.2rem;
padding: .3rem .2rem;
margin: 0;
cursor: pointer;
content: "\f005 ";
}
.radio-buttons-container .half:before {
position: absolute;
content: "\f089 ";
padding-right: 0;
}
input:checked ~ label,
label:hover,
label:hover ~ label {
color: #f0d102;
}
input:checked + label:hover,
input:checked ~ label:hover,
input:checked ~ label:hover ~ label,
label:hover ~ input:checked ~ label {
color: #f4ee28;
}

.container-button {
margin-top: 1em;
margin-bottom: 1em;
}

.results-container {
margin-top: 1em;
}
.results-content {
padding: 1em;
border: 1px solid #ececec;
background-image: linear-gradient(to top, #ececec 0%, #ffffff 100%);
}

PHP

<?php
if(isset($_POST["submit"])){
if(!empty($_POST["stars"])) {
echo "<div class='results-content'>Your selected star value is: <strong>" . $_POST["stars"] . "</strong></div>"; 
} else {
echo "<div class='results-content'>Please select a star value </div>";
}
}
?> 
</div>

Select a star value

Result

HTML

CSS

PHP