Apply two different colors to a single character with CSS 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.

Published on Feb 22, 2019

Tags: The Ultimate CSS Tutorial for Beginner Programmers

Related Posts

Did you enjoy this article? If you did here are some more articles that I thought you will enjoy as they are very similar to the article that you just finished reading.


Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.

No matter the programming language you're looking to learn, I've hopefully compiled an incredible set of tutorials for you to learn; whether you are beginner or an expert, there is something for everyone to learn. Each topic I go in-depth and provide many examples throughout. I can't wait for you to dig in and improve your skillset with any of the tutorials below.