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