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.

Tutorials

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.