Apply two different colors to a single character with CSS

When you have one or more characters in a word/logo that you want to apply multiple colors to (not a gradient).

To accomplish two unique colors inside one character, the content property of CSS will be used in conjunction with the :beforepseudo element.

CSS pseudo :before and :after

The CSS content property allows you to insert generated content. This property can be used with the :before or :after pseudo element to insert content and style it appropriately.

Let’s look at an example:

In the above example, three different span tags are created with the letters CSS. Each tag contains the attribute data-char with the matching letter in the span tag.

Then in the CSS, the main span element is styled with a color (and a large font size to make it stand out). Then the pseudo element :before styles the value of the data-char attribute with a different color. To get the split color, it sets the width to half of the element.

For fun, I also added the full acronym CSS inside a span tag to demonstrate how the content can be applied to full words.