Css Star Rating

1.1.6 #permalink Label Position

Toggle example guides Toggle HTML markup

Displays the rating value as text label.

Examples
Default styling
0
(bad)
3.1
Good
.label-top
Value displayed on the top
0
(bad)
3.1
Good
.label-right
Value displayed on the right side
0
(bad)
3.1
Good
.label-bottom
Value displayed on the bottom
0
(bad)
3.1
Good
.label-left
Value displayed on the left side
0
(bad)
3.1
Good
Markup 
<div class="rating  [modifier class]">
    <div class="label-value">0</div>
    <div class="star-container">
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-2 small  [modifier class]">
    <div class="label-value">(bad)</div>
    <div class="star-container">
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-3 medium  [modifier class]">
    <div class="label-value">3.1</div>
    <div class="star-container">
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
<div class="rating value-4 large  [modifier class]">
    <div class="label-value">Good</div>
    <div class="star-container">
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
        <div class="star">
            <svg class="star-empty">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-empty"></use>
            </svg>
            <svg class="star-filled">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="assets/images/star-rating.icons.svg#star-filled"></use>
            </svg>
        </div>
    </div>
</div>
Source: src/kss-documentation/modifiers.kss.scss, line 1214