CSS stroke on half of web font

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;
}

**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. https://stackoverflow.com/help/how-to-ask In addition, markup and code must be posted within your question and not linked to any third party site. — Rob, Nov 05 '19 at 02:16

score 0 · Answer 1 · answered Nov 05 '19 at 02:25

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;
}

CSS stroke on half of web font

1 Answers1