[data-star] {
    text-align: left;
    font-style: normal;
    display: inline-block;
    position: relative;
    unicode-bidi: bidi-override;
    font-size: 35px;
    font-weight: 900;
}

[data-star]::before {
    content: '★★★★★';
    color: #eee;
    display: block;
}

[data-star]::after {
    content: '★★★★★';
    color: #ffaa00;
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    overflow: hidden;
    width: var(--star-percent, 0%);
    height: 100%;
}

.ratingChild {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

strong.ratingChild {
    position: relative;
    top: 3px; /* Adjust value as needed for pixel-perfect alignment */
}