Moving dynamic CSS custom property out of line-CodePudding

I'm trying to implement CSP to force no in-line styling. I have one last item which is a pure CSS star rating. With in-line style I can use a custom property populated by php call to the database in order to render the stars (see below). But I can't figure out how to take that out of line to conform to security best practices.

CSS

:root {
     --star-size: 60px;
     --star-color: #fff;
     --star-background: #fc0;
}

 .Stars {
     --percent: calc(var(--rating) / 5 * 100%);
     display: inline-block;
     font-size: 20px;
     font-family: Times;
     line-height: 1;
}
 .Stars::before {
     content: '★★★★★';
     letter-spacing: 3px;
     background: linear-gradient(90deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
}

HTML

<td><div  style="--rating: <?php echo htmlspecialchars($row['RATING']); ?>;"></div></td>

CodePudding user response：