¿Se puede aplicar CSS a la mitad de un carácter? Truco ingenioso con JavaScript

¿Se puede aplicar CSS a la mitad de un carácter? Analizamos un truco ingenioso con JavaScript

¿Alguna vez te has preguntado si se puede pintar la mitad izquierda de la letra «A» de rojo y la mitad derecha de azul? ¿O hacer que la parte superior del texto sea semitransparente y la inferior no? Si has abierto Stack Overflow y te has preguntado «Is it possible to apply CSS to half of a character?», no estás solo. Esta pregunta ha acumulado miles de visitas, y la respuesta es un verdadero desafío para cualquier desarrollador web.

A primera vista, parece que CSS solo trabaja con elementos completos. Pero con la ayuda de JavaScript y un par de trucos, podemos engañar al navegador y crear la ilusión de un estilo «dividido». Hoy analizaremos tres métodos funcionales: desde la simple duplicación de texto hasta el uso de SVG y clip-path. ¡Allá vamos!

¿Por qué CSS no puede «cortar» un carácter?

Antes de meternos en el código, entendamos la naturaleza del problema. CSS opera con bloques (cajas). Cada carácter es parte de un flujo de texto, y el navegador lo renderiza como una unidad completa. No existe una propiedad half-color o half-background. Incluso los pseudoelementos ::before y ::after trabajan a nivel del elemento completo, no de su contenido.

Pero esto no significa que el problema no tenga solución. Podemos usar JavaScript para dividir el texto en partes y aplicar estilos a cada mitad visualmente. Lo importante es mantener la legibilidad y la semántica.

Método 1: Duplicación de texto con clip-path (CSS + JS)

El truco más popular que se discute en Stack Overflow es superponer dos copias del texto una sobre otra y recortar cada mitad con clip-path. Vamos a implementarlo con JavaScript.

Paso 1. Estructura HTML

<div class="half-text" data-text="¡Hola, mundo!"></div>

Paso 2. Lógica en JavaScript

const container = document.querySelector('.half-text');\nconst text = container.dataset.text;\n\n// Creamos dos copias del texto\nconst leftPart = document.createElement('span');\nleftPart.textContent = text;\nleftPart.className = 'half left';\n\nconst rightPart = document.createElement('span');\nrightPart.textContent = text;\nrightPart.className = 'half right';\n\ncontainer.appendChild(leftPart);\ncontainer.appendChild(rightPart);

Paso 3. Estilos CSS

.half-text {\n  position: relative;\n  font-size: 48px;\n  font-weight: bold;\n  display: inline-block;\n}\n\n.half {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.half.left {\n  color: #ff6b6b;\n  clip-path: inset(0 50% 0 0); /* mitad izquierda */\n}\n\n.half.right {\n  color: #4ecdc4;\n  clip-path: inset(0 0 0 50%); /* mitad derecha */\n}

Resultado: cada letra se divide exactamente por la mitad. clip-path recorta los caracteres por una línea vertical. El truco funciona perfectamente con fuentes monoespaciadas, pero para fuentes normales puede haber un pequeño desplazamiento; se puede corregir fácilmente añadiendo letter-spacing: 0.

Método 2: División del texto en caracteres (JS avanzado)

Si necesitas aplicar un estilo no a todo el bloque, sino a cada letra individualmente (por ejemplo, la mitad superior de la «A» en verde y la inferior en amarillo), tendrás que trabajar con cada carácter por separado. Aquí es donde entra en juego JavaScript para estilizar texto.

Idea

Dividimos la cadena en un array de caracteres, colocamos cada carácter en un <span> independiente y lo duplicamos de nuevo, pero ahora a nivel de letras. Luego aplicamos clip-path a cada span.

function splitTextToHalf(selector) {\n  const element = document.querySelector(selector);\n  const originalText = element.textContent;\n  element.innerHTML = '';\n\n  // Creamos un contenedor para cada letra\n  for (let char of originalText) {\n    const wrapper = document.createE