title: Is it possible to apply CSS to half of a character?
body: <p><strong>What I am looking for:</strong></p>
  
  <p>A way to style one <strong>HALF</strong> of a character. (In this case, half the letter being transparent)</p>
  
  <p><strong>What I have currently searched for and tried (With no luck):</strong></p>
  
  <ul>
  <li>Methods for styling half of a character/letter</li>
  <li>Styling part of a character with CSS or JavaScript</li>
  <li>Apply CSS to 50% of a character</li>
  </ul>
  
  <p>Below is an example of what I am trying to obtain.</p>
  
  <p><img src="https://i.stack.imgur.com/SaH8v.png" alt="x"></p>
  
  <p>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.</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>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 <strong><a href="https://web.archive.org/web/20140428135239/http://halifaxdefined.ca/img/halifax_logo_new.png" rel="noreferrer">logo</a></strong> 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 <strong><a href="http://gameovercancer.ca/tests/brandgenerator/" rel="noreferrer">website</a></strong> as a joke. Type in 'Halifax' and you will see what I mean.</p>