Kann man CSS-Stile nur auf die Hälfte eines Zeichens (Buchstabens) anwenden?

Hallo zusammen! Ich erstelle eine kleine Portfolio-Website und bin auf eine interessante Herausforderung gestoßen. Ich habe eine Überschrift mit einem Namen und möchte, dass die linke Hälfte des Buchstabens rot und die rechte Hälfte blau ist. Zum Beispiel soll beim Buchstaben 'A' das linke Bein eine Farbe haben und das rechte eine andere. Ich kenne CSS und kann ganze Zeichen stylen, aber wie teilt man ein einzelnes Zeichen in zwei Hälften? Ich habe es mit Gradienten (linear-gradient) versucht, aber sie färben das gesamte Zeichen ein, nicht nur einen Teil. Ich habe versucht, die Hälften in einen span mit overflow: hidden zu packen, aber das funktioniert nur bei monospaced Schriftarten und sieht schief aus. Hier ist ein Beispiel, was ich versucht habe: ```javascript // Ich dachte, vielleicht kann man den String mit JavaScript aufteilen und die Hälfte des Buchstabens in einen span packen? const text = "Hallo"; const halfIndex = Math.ceil(text[0].length / 2); // Aber das funktioniert nicht, weil ein Zeichen eine unteilbare Einheit ist ``` Gibt es vielleicht einen cleveren CSS-Trick oder eine JavaScript-Lösung? Ich habe gesehen, dass auf CSS-Tricks ähnliche Dinge diskutiert werden, aber da