Is it possible to apply CSS to half of a character?
What I am looking for:
A way to style one HALF of a character. (In this case, half the letter being transparent)
What I have currently searched for and tried (With no luck):
- Methods for styling half of a character/letter
- Styling part of a character with CSS or JavaScript
- Apply CSS to 50% of a character
Below is an example of what I am trying to obtain.
Does a CSS or JavaScript solution exist for this, or am I going to have to resort to images? I would prefer not to go the image route as this text will end up being generated dynamically.
UPDATE:
Since many have asked why I would ever want to style half of a character, this is why. My city had recently spent $250,000 to define a new "brand" for itself. This logo is what they came up with. Many people have complained about the simplicity and lack of creativity and continue to do so. My goal was to come up with this website as a joke. Type in 'Halifax' and you will see what I mean.
