• HTML
• CSS
• JS

HTML

<div class="container">
    <div class="rating-wrap">
        <h2>Star Rating</h2>
        <div class="center">
            <filedset class="rating">
                <input type="radio" id="star5" name="rating" value="5"/><label for="star5" class="full"></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>
            </filedset>
        </div>
        
        <h4 id="rating-value"></h4>
        
    </div>
</div>

CSS

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

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

html,body{
    width:100%;
    height:100%;
}

body{
    font-family:Arial,sans-serif;
}

.container{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.rating-wrap{
    max-width:480px;
    margin:auto;
    padding:15px;
    box-shadow:0 0 3px 0 rgba(0,0,0,.2);
    text-align:center;
}

.center{
    width:162px;
    margin:auto;
}

#rating-value{
    width:110px;
    margin:40px auto 0;
    padding:10px 5px;
    text-align:center;
    box-shadow:inset 0 0 2px 1px rgba(46,204,113,.2);
}

/*style star rating*/
.rating{
    border:none;
    float:left;
}

.rating > input{
    display:none;
}

.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;
}

.rating > label{
    color:#ddd;
    float:right;
    cursor:pointer;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover, 
.rating:not(:checked) > label:hover ~ label{
	color: #2ce679;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label{
	color: #2ddc76;
}

JS

let star = document.querySelector('.rating').children;
let showValue = document.querySelector('#rating-value');

for(let i=0;i < star.length;i++){
    star[i].addEventListener('click',function(){
       i= this.value; 
       
       showValue.innerHTML = i + " out of 5";
    });
}