Можно ли применить CSS-стили к половине символа в тексте?

Question

alex_dev70 · 09.05.2026

Можно ли применить CSS-стили к половине символа в тексте?

Всем привет! Я начинающий фронтенд-разработчик и столкнулся с интересной задачей. Нужно сделать так, чтобы одна половина буквы (например, левая часть) была окрашена в один цвет, а правая — в другой. Пытался сделать это через стандартные CSS-свойства, но ничего не вышло. Вот пример моей попытки: ```javascript // Пытался разбить строку на символы и стилизовать половину const text = "Привет"; const letters = text.split(''); // А дальше не знаю что делать... ``` Пробовал использовать `::before` и `::after`, но они работают только с целыми элементами. Использовал `background-clip: text`, но это красит весь текст целиком. Может, есть какой-то хитрый способ через JavaScript? Или это вообще невозможно? Мне нужно, чтобы результат выглядел примерно так: левая половина буквы "П" красная, правая — синяя. То есть стили применяются не ко всему символу, а к его части. Видел, что на некоторых сайтах делают подобные эффекты с градиентами, но мне нужен четкий переход посередине буквы, а не плавный. Подскажите, как это можно реализовать? Может, есть какие-то готовые библиотеки или подходы? Буду благодарен за примеры кода. <<>>

Решение через CSS-градиент с прозрачностью

Да, это возможно! Самый простой и кросс-браузерный способ — использовать CSS-градиент в сочетании с background-clip: text. Вот полное решение:

/* HTML */
<span class="half-color">П</span>

/* CSS */
.half-color {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(
    to right,
    #ff0000 0%,
    #ff0000 50%,
    #0000ff 50%,
    #0000ff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Этот метод работает следующим образом:

Градиент делится ровно пополам (50%) на два цвета
background-clip: text обрезает фон по контуру буквы
color: transparent делает сам текст прозрачным, оставляя только фон

Универсальное JavaScript-решение

Если нужно применить эффект к любому тексту программно:

function splitColorText(element, leftColor, rightColor) {
  const text = element.textContent;
  element.textContent = '';
  
  text.split('').forEach(char => {
    if (char === ' ') {
      // Пробелы добавляем как есть
      element.appendChild(document.createTextNode(' '));
      return;
    }
    
    const span = document.createElement('span');
    span.textContent = char;
    span.style.cssText = `
      background: linear-gradient(
        to right,
        ${leftColor} 0%,
        ${leftColor} 50%,
        ${rightColor} 50%,
        ${rightColor} 100%
      );
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      display: inline-block;
    `;
    element.appendChild(span);
  });
}

// Использование:
const title = document.getElementById('title');
splitColorText(title, '#ff0000', '#0000ff');

Важные замечания

Браузерная поддержка: Работает во всех современных браузерах, включая Chrome, Firefox, Safari, Edge
Китайские/японские символы: Метод отлично работает с любыми символами Unicode
Сложные шрифты: Для иконочных шрифтов (Font Awesome) может потребоваться дополнительная настройка
Анимация: Можно анимировать градиент через CSS-анимации для движущегося разделения

Альтернатива с SVG

Если нужна максимальная гибкость (например, нелинейное разделение):

<svg width="50" height="50">
  <defs>
    <clipPath id="letterClip">
      <text x="0" y="40" font-size="48">П</text>
    </clipPath>
  </defs>
  
  <rect x="0" y="0" width="25" height="50" 
        fill="red" clip-path="url(#letterClip)"/>
  <rect x="25" y="0" width="25" height="50" 
        fill="blue" clip-path="url(#letterClip)"/>
</svg>

SVG-подход дает полный контроль, но сложнее в поддержке динамического текста. Для большинства случаев достаточно CSS-градиента.

<<>>

Подход с дублированием символов

Можно использовать хак с дублированием текста и обрезанием через overflow: hidden:

const text = "Привет";
const container = document.getElementById('container');

// Создаем два слоя
const left = document.createElement('span');
left.textContent = text;
left.style.cssText = `
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: red;
`;

const right = document.createElement('span');
right.textContent = text;
right.style.cssText = `
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: blue;
`;

container.style.position = 'relative';
container.appendChild(left);
container.appendChild(right);

Этот метод менее элегантный, но работает в старых браузерах и не требует background-clip. Минус: текст дублируется, что может быть проблемой для SEO и скринридеров.

Для простых случаев лучше использовать первый ответ с градиентом — он чище и производительнее.

0 ответов