Can I apply CSS styles to only half of a character (letter)?

Hi everyone! I'm making a small portfolio site and ran into an interesting problem. I have a heading with a name, and I want the left half of the letter to be red and the right half to be blue. For example, for the letter "A", I need the left leg to be one color and the right leg to be another. I know CSS and can style entire characters, but how do I split a single character into two halves? I tried using gradients (linear-gradient), but they color the entire character as a whole, not just part of it. I tried wrapping halves in a span with overflow: hidden, but that only works for monospace fonts and looks messy. Here's an example of what I tried: ```javascript // I thought maybe I could somehow split the string via JavaScript and wrap half the letter in a span? const text = "Hello"; const halfIndex = Math.ceil(text[0].le