.rating { font-size:1.2rem; line-height: 1.2rem; display: inline-block; } .rating .star { position: relative; float: left; width: 1.1rem; height: 1.2rem; font-family:FontAwesome; font-weight:normal; font-style:normal; /* text-shadow: 1px 1px 2px rgba(0,0,0,.4); */ border: 0; background: transparent; font-size: 14px; } .rating .star:before { position: absolute; top: 50%; left: 50%; width: 1.1rem; height: 1.1rem; transform: translate(-50%, -50%); content:"\f006"; /* color:#777; */ color: #e8e8e8; } .rating--read-only .star--full:before { content:"\f005"; color:#FFC315; } .rating--read-only .star--half:after { position: absolute; top: 50%; left: 50%; width: 1.2rem; height: 1.2rem; transform: translate(-50%, -50%); content:"\f089"; color: #FFC315; } /* Floating this right, means that the stars * fill from the left, because of the successor * rule defined below. @see https://css-tricks.com/star-ratings/ */ .rating--interactive .star { float: right; } .rating--interactive .star:hover { cursor:pointer; } .rating--interactive .star:hover:before, .rating--interactive .star:hover ~ .star:before { content:"\f005"; color:#e3cf7a }