CSS Tutorial - split text

How to Create a Split Text Effect with CSS Pseudo Elements

In this tutorial, we'll walk through a clever technique using CSS pseudo-elements (::before and ::after) to create a stylish, layered text effect. The text is split into two colored sections, slightly offset from each other, giving it a cool visual pop—while remaining accessible to screen readers.

Step 1: Start with Basic Markup

We'll begin with a simple <h1> element styled in CSS.

    <h1>This is some text </h1>

And here's the CSS:

h1 {
    font-size: 10vw;
    color: white;
    font-weight: bold;
    position: relative;
}

Step 2: Add a Data Attribute

Now, we'll add a data-slug attribute to our <h1>element. This will act as the source for our pseudo-element content.

    <h1 data-slug="This is some text">This is some text</h1>

The text inside data-slug will be dynamically injected into both ::before and ::after using the attr() CSS function.

Step 3: Add the Pseudo-Elements

Here's where the magic starts. We'll use the ::before and ::after pseudo-elements to clone the original text, then clip and style each part differently.

h1::before {
    content: attr(data-slug);appears here */
    position: absolute;
    color: orange;
    font-size: inherit;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    clip-path: inset(0 0 40% 0);
    pointer-events: none;
}

h1::after {
    content: attr(data-slug);
    position: absolute;
    color: olive;
    font-size: inherit;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 3;
    clip-path: inset(60% 0 0 0);
    pointer-events: none;
}

The overlapping gap creates a natural separation, and later we'll shift them to build a layered effect.

Step 4: Offset the Layers

To enhance the layered look, we'll offset each pseudo-element slightly.

h1::before {
    left: -2px;
}

h1::after {
    left: 2px;
    top: 2px;
}

Step 5: Hide the Original Text Color

Since the pseudo-elements fully replicate the text, we can make the original text transparent:

h1 {
    color: transparent;
}

Step 6: Customize the Final Look

Want a cleaner, unified effect? Just change the colors of the pseudo-elements:

h1::before,
h1::after {
    color: #fff;
}

Final Result

You now have a visually appealing text effect that layers two slices of the same content—great for modern UIs, hero titles, or promotional headers. And because the original text still exists in the DOM and isn't visually altered via JS, it's still accessible to screen readers.

That's it!

You've just built a cool, accessible visual effect using pure CSS. Play around with clip-path, colors, and offsets to make the design truly yours.

Enjoy!