Passing dynamic source to make CSS star rating

By creating custom attribute, I can access it in custom CSS, but only as a string. It means I can’t use it in CSS calc() function.

Is there a Cwicly way to set an inlined custom CSS property for the block inside the style attribute? E.g. like here.

image

I had to make a small code as a shortcode, but here is the result. CSS based star rating.

image

Solution.

Shortcode to get the ACF field value.

And then CSS to show stars in a paragraph block.

Shortcode would be useless if it would be possible to pass inline variables straight from Cwicly. Now it’s possible to pass only custom attributes, which are always strings only and can’t be used in css functions as numbers.

3 Likes

Very nice star rating method :heart:
Bookmarked!