CSS stroke on half of web font [duplicate]

Question

CSS stroke allows to outline a font. I want to outline only 50% of a font.

I've seen a few workaround with JavaSCript to set css on half a letter, but i would like to this with CSS.

My goal is to able to add class to the the right star web font to look like the left full star. The image is 2 diffrent icons, I want to able to create the "half" look on the star with CSS stroke effect on the web font of the icon.

This is codepen that has a one icon without the stroke CSS effect, one with CSS stroke. How can I set in the css the so the stroke effect will create half icon "full" and other half "empty"?

.empty {
  -webkit-text-fill-color: white;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

Answer 1

I doubt this is possible in pure CSS, but if you can add some tags then it's straightforward to do by having two icons on top of each other, and clipping one with overflow: hidden.

HTML:

<span class="half-thumb">
    <span class="mdi mdi-thumb-up"></span>
    <span class="mdi mdi-thumb-up empty"></span>
</span>

CSS:

.half-thumb {
    position: relative;
}
.half-thumb :first-child {
    width: 50%;
    overflow: hidden;
    position: absolute;
}