Как стилизовать часть одного символа с наложениями, используя динамическую ширину?

Вопрос

Могу ли я стилизовать только часть одного символа?

Значение

Атрибуты CSS нельзя назначать частям символов. Но если вы хотите стилизовать только определенную часть персонажа, стандартного способа сделать это не существует.

Пример

Можно ли стилизовать "X", который наполовину красный, а затем черный?

Нерабочий код

 
    X

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

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

Демонстрация на jsFiddle

Цель

Мое намерение заключается в стилизации символа Font Awesomeв виде звезды . Если у меня есть оверлей с динамической шириной, разве нельзя создать точную визуализацию результатов?