html - Css rating with certain symbols

Question

I want to create a rating system, but with certain symbol. It's similar to *, but it's not. How can I make that symbol?

.rating-result {
    width: 265px;
    margin: 0 auto;
}
.rating-result span {
    padding: 0;
    font-size: 52px;
    margin: 0 3px;
    line-height: 1;
    color: lightgrey;
    text-shadow: 1px 1px #bbb;
}
.rating-result > span:before {
    content: '*';
}
.rating-result > span.active {
    text-shadow: 1px 1px #c60;
}

<div class="rating-result">
    <span class="active"></span>    
    <span class="active"></span>    
    <span class="active"></span>  
    <span></span>    
    <span></span>
</div>

question from:https://stackoverflow.com/questions/65849189/css-rating-with-certain-symbols

Answer 1

We can rotate the symbol by using CSS - transform: rotate(30deg)

.rating-result {
    width: 265px;
    margin: 0 auto;
}
.rating-result span {
    padding: 0;
    font-size: 52px;
    margin: 0 3px;
    line-height: 1;
    color: lightgrey;
    text-shadow: 1px 1px #bbb;
}
.rating-result > span:before {
    content: '?';
    display: inline-block;
    transform: rotate(30deg);
}
.rating-result > span.active {
    text-shadow: 1px 1px #c60;
}

<div class="rating-result">
    <span class="active"></span>    
    <span class="active"></span>    
    <span class="active"></span>  
    <span></span>    
    <span></span>
</div>