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

Question

Question

Can I style just a part of a single character?

Meaning

CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.

Example

Is it possible to style an "X" which is half-way red and then black?

Expected result

Not working code

<div class="content"> 
    X
</div>

.content {
    position: relative;
    font-size: 50px;
    color: black;
}

.content:after {
    content: 'X';
    color: red;
    width: 50%;
    position: absolute;
    overflow: hidden;
}

Demo on jsFiddle

Purpose

My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?

I've seen something similar at the LGM shown by Ricardo Lafuente and Ana Carvalho: [colorfont.js](http://manufacturaindependente.com/colorfont/) — Bobby, Jun 21 '12 at 08:50
I asked a similar question recently and it received a lot more attention. You can find it here. http://stackoverflow.com/questions/23569441/is-it-possible-to-apply-css-to-half-of-a-character — SimplyAzuma, Jun 13 '14 at 13:46

Alp · Accepted Answer · 2012-06-21T07:05:28.387

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

How can I do it but with an image that has transparent backround? — Asaf, Dec 07 '20 at 10:24

score 5 · Answer 2 · answered Jun 21 '12 at 07:29

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:

Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
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.

that's a good solution too! i like the clean markup. now people can choose weather they want to duplicate their content in html or css — Alp, Jun 21 '12 at 07:33