Can CSS be applied to half a character? A clever JavaScript trick

Can CSS be applied to half a character? Analyzing a clever JavaScript trick

Have you ever wondered if you could color the left half of the letter "A" red and the right half blue? Or make the top part of the text semi-transparent while the bottom part is not? If you've opened Stack Overflow and asked the question "Is it possible to apply CSS to half of a character?", then you are not alone. This question has gathered thousands of views, and the answer to it is a real challenge for a web developer.

At first glance, it seems that CSS only works with whole elements. But with the help of JavaScript and a couple of tricks, we can fool the browser and create the illusion of a "half" style. Today we will analyze three working methods: from simple text duplication to using SVG and clip-path. Let's go!

Why can't CSS "cut" a character?

Before diving into the code, let's understand the nature of the problem. CSS operates with boxes. Each character is part of a text flow, and the browser renders it as a single whole. There is no half-color or half-background property. Even pseudo-elements ::before and ::after work at the level of the entire element, not its content.

But this doesn't mean the task is unsolvable. We can use JavaScript to split the text into parts and apply styles to each half visually. The main thing is to preserve readability and semantics.

Method 1: Duplicating text with clip-path (CSS + JS)

The most popular trick discussed on Stack Overflow is overlaying two copies of the text on top of each other and clipping each half using clip-path. Let's implement it with JavaScript.

Step 1. HTML structure

<div class="half-text" data-text="Hello, world!"></div>

Step 2. JavaScript logic

const container = document.querySelector('.half-text');\nconst text = container.dataset.text;\n\n// Create two copies of the text\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);

Step 3. CSS styles

.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); /* left half */\n}\n\n.half.right {\n  color: #4ecdc4;\n  clip-path: inset(0 0 0 50%); /* right half */\n}

Result: each letter is split exactly in the middle. clip-path cuts the characters along a vertical line. The trick works perfectly with monospace fonts, but for regular fonts there might be a slight offset — it's easy to fix by adding letter-spacing: 0.

Method 2: Splitting text into characters (advanced JS)

If you need to apply a style not to the entire block, but to each letter individually (for example, the top half of "A" is green, the bottom half is yellow), then you'll have to work with each character separately. This is where JavaScript for text styling comes to the rescue.

Idea

We split the string into an array of characters, place each character in a separate <span>, and duplicate them again, but this time at the letter level. Then we apply clip-path to each span.

function splitTextToHalf(selector) {\n  const element = document.querySelector(selector);\n  const originalText = element.textContent;\n  element.innerHTML = '';\n\n  // Create a container for each letter\n  for (let char of originalText) {\n    const wrapper = document.createE