html - How to invert colors horizontally halfway through a word using CSS

I was wondering how to invert the colors horizontally in the middle of a word (or character) like in this image.

I tried tweaking the solutions to this question that details how to do it when it's spliced vertically, but I couldn't get it to work. I know it can be done using only HTML and CSS, but I have no idea where to begin.

Thanks in advance!

UPDATE: This is not the same as this question, because I'm looking to do a horizontal split, not a vertical one (I do see the answer that shows a horizontal split, but the text looks funny — it looks like different colored versions of the characters were overlapped maybe?). I did try looking on codepen, but I was only finding solutions for vertical splits.