Another CSS-only solution (though data-attribute is needed if you don't want to write letter-specific CSS). This one works more across the board (Tested IE 9/10, Chrome latest & FF latest)

http://jsfiddle.net/pkML2/

HTML

<span data-char="X">X</span>

CSS

span {
    position: relative;
    color: rgba(50,50,200,0.5);
}

span:before {
    content: attr(data-char);
    position: absolute;
    width: 50%;
    overflow: hidden;
    color: rgb(50,50,200);
}

Another CSS-only solution (though data-attribute is needed if you don't want to write letter-specific CSS). This one works more across the board (Tested IE 9/10, Chrome latest & FF latest)

span {
  position: relative;
  color: rgba(50,50,200,0.5);
}

span:before {
  content: attr(data-char);
  position: absolute;
  width: 50%;
  overflow: hidden;
  color: rgb(50,50,200);
}

<span data-char="X">X</span>