Revealing Text With CSS letter

Some text effects are relatively hard to pull in CSS, the main reason being we are unable to target individual characters (something many of us want in the form of ::nth-letter(), although we have basis for it with ::first-letterthat gives us access to a box element’s first glyph.

But maybe there are a few things we can use today with what we already have.

For example, the CSS letter-spacingproperty adjusts the space between all characters in a block of text. Positive values add spaceto the right side of each glyph (in a left-to-right writing mode), and negative values shrink the width of the glyph box, causing letters to overlap and even move the other way.

The letter-spacingaccepts length units, and percentage (relative to font size). It is animateable, and as we saw before, the negative values can shrink it down or reverse it. Which is something we can make use of.

Overlapping and separating letters

It’s quite easy to completely overlap the characters as a starting point and setting it’s colorto transparentto visually hide it.

label {   letter-spacing: -1ch;  color: transparent;  /* etc. */}

From there, we can reveal the text by animating that letter-spacingvalue to a positive value and updating the colorto a visible value, like when a checkbox is :checked:

li:nth-of-type(2) label {   text-align: center;}li:nth-of-type(3) label {   text-align: right;}input:checked + label {   letter-spacing: 0ch;  color: black;  transition: letter-spacing 0.6s, color 0.4s;}

Note:The CSS chunit is a relative length representing the width of the zero (0) glyph.

The labels go from negative letter-spacingto normal spacing and the colorupdates to black. Both these changes happen over a transition.

The second and third labels are given center and right text alignments and thus when negative letter spacing is applied they bundle up at the given alignment position, center and right, respectively. When letter``-``spacinggoes from negative to zero (or any positive value) the letters separate from that same alignment position.

Thus, we get a text reveal effect! Let’s look at some more.

Showing and hiding text

Check this out. We can toggle a checkbox label as a fun interactive UI touch:

<!-- Simplified for brevity; additional accessibility considerations --><input type="checkbox" id="cb"><label for="cb"><span>Join the global club</span><span>You've begun your journey!</span></label>

label {   overflow: clip;  /* etc. */}span {   /* The first label */  &:nth-of-type(1) {     /* Default spacing: letters are fully visible */    letter-spacing: 0ch;    /* When the checkbox is checked, target this text */    :checked + * & {       /* collapse letters on top of each other, hiding them */      letter-spacing: -2ch;      text-indent: -1.5ch;      /* Use a "bouncy" cubic-bezier for spacing */      transition: 0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4),                   0.1s text-indent;    }  }    /* The second label */  &:nth-of-type(2) {      /* Initially collapsed (letters overlap) */    letter-spacing: -1ch;    color: transparent;    /* When the checkbox is checked, target this text */    :checked + * & {       /* Returns to normal spacing */      letter-spacing: 0ch;      color: black;      /* Slightly delay the appearance so it starts after the first text begins to hide */      transition:        0.4s letter-spacing cubic-bezier(.8, -.5, .2, 1.4) 0.3s,         0.8s color 0.4s;    }  }}

When the box is checked, a negative letter-spacingvalue (-2ch) and text-indentvalue (-1.5ch) is used on the first <span>to slide it out of the container box. We use overflow: clipto completely hide the text.

Concurrently, the text in the second <span>text goes from a letter-spacingvalue of -1chto 0ch, which reveals it. To hide this overlapped text at -1ch, a transparentcolor was given that’s turned to blackwhen the checkbox is checked.

Using with other glyph box styling

Here’s another fun one. We can start with an acronym that reveal the full text on hover. Again, we have existing features to help us pull this off, including ::first-letterand ::first-line.

We’ll start with this markup:

<!-- Simplified for brevity --><p id="acronym"><span class="words">United</span><span class="words">Nations</span><span class="words">International</span><span class="words">Children's</span><span class="words">Emergency</span><span class="words">Fund</span></p>

.words {   letter-spacing: -1ch;  color: transparent;  /* etc. */  &::first-letter {     color: black;  }  figure:hover + #acronym & {     letter-spacing: 0ch;    color: black;    transition: letter-spacing 0.4s cubic-bezier(.8, -.5, .2, 1.4) /* etc. */;  }}

Each word in the UNICEF acronym initially has letter-spacing: -1chto shrink the text, and color: transparentto keep the shrunk text hidden, except the ::first-letterthat has color: blackso it remains visible even though the rest of the text is stacked beneath it.

Now, we can target the image on :hoverand select the entire text so that the letter-spacingvalue for each word decreases to 0chand color: blackis applied, showing what’s remaining of the words:

What else can we do?

I don’t know! But that’s where you come in. Obviously, a hypothetical ::nth-letterselector would be amazing for all kinds of text effects. But it’s neat that we can create some semblance of it today with existing features, like letter-spacing, ::first-letter, and ::first-line.

What can you cook up knowing we have these constraints?