Una opción sencilla sería hacer uso de los pseudo elementos ::before
o ::after
para esto.
La idea sería escribir la letra y usando, por ejemplo ::before
, escribir la misma letra encima con otro color, posicionándola exactamente encima de la letra original (con position: absolute
) y ocultando el sobrante (con oveflow: hidden
). De ese modo una parte de la letra visible será el pseudo-elemento y la otra mitad el elemento original.
Para que la letra aparezca con la mitad derecha de un color y la mitad izquierda de otro (división horizontal de colores) haría falta que el pseudo-elemento ocupase el 50% del ancho. Si lo que quieres es que aparezca una división vertical de colores, entonces sería un 50% del alto.
Aquí puedes verlo funcionando:
.letras-partidas span {
position: relative;
color: black;
font-size: 60px;
}
.letras-partidas span::before {
content: attr(data-letra);
position: absolute;
top: 0;
left: 0;
width: 50%;
overflow: hidden;
color: red;
}
.letras-partidas.vertical span::before {
content: attr(data-letra);
width: 100%;
height: 50%;
color: red;
}
<div class="letras-partidas">
<span data-letra="H">H</span>
<span data-letra="O">O</span>
<span data-letra="L">L</span>
<span data-letra="A">A</span>
</div>
<div class="letras-partidas vertical">
<span data-letra="C">C</span>
<span data-letra="A">A</span>
<span data-letra="R">R</span>
<span data-letra="A">A</span>
<span data-letra="C">C</span>
<span data-letra="O">O</span>
<span data-letra="L">L</span>
<span data-letra="A">A</span>
</div>
*Si el texto va a ocupar una única fila, entonces se podría simplificar el ejemplo con los colores verticales, aplicando los estilos directamente al contenedor sin necesidad de tener tantas etiquetas.
A partir de eso, puedes hacer ejemplos más elaborados:
¿Quieres que en lugar de 2 colores sean 3? Usan ::before
y ::after
y en lugar del 50%, haz que los pseudo-elementos ocupen un 66% y 33% respectivamente:
.letras-partidas span {
position: relative;
color: green;
font-size: 60px;
}
.letras-partidas span::before,
.letras-partidas span::after {
content: attr(data-letra);
position: absolute;
top: 0;
left: 0;
width: 66%;
overflow: hidden;
color: red;
}
.letras-partidas span::after {
color: blue;
width: 33%;
}
<div class="letras-partidas">
<span data-letra="H">H</span>
<span data-letra="O">O</span>
<span data-letra="L">L</span>
<span data-letra="A">A</span>
</div>