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

Вопрос

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

Значение

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

Пример

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

Expected result

Не работает код

<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;
}

Демо на jsFiddle

Цель

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

Ответы

Ответ 1

Во время игры с демо-скриптом я понял это и хотел поделиться своим решением. Это довольно просто.

Прежде всего: DEMO

Чтобы частично сгладить один символ, вам потребуется дополнительная разметка для вашего контента. В принципе, вам необходимо его дублировать:

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

Использование псевдоэлементов типа: после или: раньше было бы лучше, но я не нашел способ сделать это.

Наложение должно быть помещено абсолютно в элемент содержимого:

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

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

Не забывайте overflow: hidden;, чтобы отрезать часть повторения "X".

Вы можете использовать любую ширину вместо 50%, что делает этот подход очень гибким. Вы даже можете использовать пользовательскую высоту, другие атрибуты CSS или комбинацию нескольких атрибутов.

расширенный DEMO

Ответ 2

Отличная работа над вашим решением. Ive получила версию, которая использует :after (вместо дублирования содержимого в HTML), работающего в Chrome 19.

В основном:

  • Установите position:relative на .content
  • Позиция :after абсолютно
  • Установите :after в overflow:hidden
  • Отрегулируйте ширину, высоту, текст-отступ и высоту строки :after, чтобы скрыть его.

Я не уверен, что он будет работать в кросс-браузере, хотя значения em, вероятно, будут работать несколько иначе. (Очевидно, что это определенно не работает в IE 7 или ниже.)

Кроме того, вам придется дублировать содержимое в вашем файле CSS вместо HTML, что может быть не оптимальным в зависимости от ситуации.