How can I style a part of a single character with overlays using a dynamic width?

Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.

• http://jsfiddle.net/v5xzJ/4/

Basically:

1. Set position:relative on .content
2. Position :after absolutely
3. Set :after to overflow:hidden
4. Adjust the width, height, text-indent and line-height of :after to hide bits of it.

I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)

In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.

While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.

First things first: The DEMO

To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:

<​div class="content"> 
    <span class="overlay">X</span>
    X
</div>

Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.

The overlay needs to be positioned absolutely to the content element:

​.content {
    display: inline-block;
    position: relative;
    color: black;
}

​.overlay {
    width: 50%;
    position: absolute;
    color: red;
    overflow: hidden;
}​

Do not forget overflow: hidden; in order to cut off the remaing part of the "X".

You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.

Extended DEMO