Star Rating CSS

with no reversed markup or floats. http://stackoverflow.com/a/27993987/923745

by kdrdgn

HTML

<div class="rating">
    <label><span>1</span></label>
    <label><span>2</span></label>
    <label><span>3</span></label>
    <label><span>4</span></label>
    <label><span>5</span></label>
</div>

CSS

.rating {
    overflow: hidden;
    padding: 20px;
}

.rating label {
    display: block;
    float: left;
    padding: 20px;;
}

.rating label:hover ~ label {
    background-color: blue;
}

.rating label:hover + label {
  background-color: red;
}
.rating:hover label {
    background-color: yellow;
}