Helping you solve those tough coding problems!

Apply two different colors to a single character with CSS Apply two different colors to a single character with CSS

Published on Feb 22, 2019 by Jamie Munro

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.

Tags: CSS | css3 | CSS

My Books
ASP.NET MVC 5 With Bootstrap and Knockout.js
Knockout.js Building Dynamic Client-Side Applications
20 Recipes for Programming MVC 3
20 Recipes for Programming PhoneGap
Rapid Application Development with CakePHP