Можно ли применить CSS-стили только к половине символа (буквы)?

Решение с помощью CSS clip-path и дублирования текста

Да, это возможно, но требует небольшого трюка с дублированием текста и использованием CSS-свойства clip-path. Основная идея — создать два одинаковых текстовых элемента, наложить их друг на друга, и обрезать каждый так, чтобы осталась только нужная половина.

Вот пошаговое решение:

<!DOCTYPE html>
<html>
<head>
<style>
  .half-text {
    position: relative;
    display: inline-block;
    font-size: 48px;
    font-weight: bold;
    font-family: Arial, sans-serif;
  }

  .half-text .left-half {
    color: red;
    clip-path: inset(0 50% 0 0); /* Оставляем только левую половину */
  }

  .half-text .right-half {
    color: blue;
    clip-path: inset(0 0 0 50%); /* Оставляем только правую половину */
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
</head>
<body>

<div class="half-text">
  <span class="left-half">А</span>
  <span class="right-half">А</span>
</div>

</body>
</html>

Как это работает:

• clip-path: inset(top right bottom left) — обрезает элемент по указанным отступам. inset(0 50% 0 0) оставляет только левые 50% ширины, inset(0 0 0 50%) — только правые 50%.
• Мы дублируем символ: один окрашиваем в красный и обрезаем слева, второй — в синий и обрезаем справа.
• Второй элемент позиционируется абсолютно поверх первого.

Для целой строки используем JavaScript:

function splitTextHalf(text, leftColor, rightColor) {
  const container = document.createElement('div');
  container.style.cssText = 'position: relative; display: inline-block; font-size: 48px; font-weight: bold;';

  // Создаем левую половину для каждого символа
  const leftSpan = document.createElement('span');
  leftSpan.style.cssText = `color: ${leftColor}; clip-path: inset(0 50% 0 0);`;
  leftSpan.textContent = text;

  // Создаем правую половину
  const rightSpan = document.createElement('span');
  rightSpan.style.cssText = `color: ${rightColor}; clip-path: inset(0 0 0 50%); position: absolute; top: 0; left: 0;`;
  rightSpan.textContent = text;

  container.appendChild(leftSpan);
  container.appendChild(rightSpan);
  return container;
}

// Использование:
const element = splitTextHalf("Hello", "#ff0000", "#0000ff");
document.body.appendChild(element);

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

• Этот метод работает для любых шрифтов, включая курсивные и декоративные.
• Для браузеров, не поддерживающих clip-path (очень старые), можно использовать overflow: hidden в комбинации с шириной 50%, но это менее гибко.
• Если нужно применить к части слова, а не ко всему тексту — оберните нужные символы в отдельные span с таким же подходом.

Этот метод даёт полный контроль над цветом каждой половины символа и работает во всех современных браузерах.

.half-gradient {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(to right, red 50%, blue 50%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}