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.
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
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.
Jamie Munro is the author of ASP.NET MVC 5 with Bootstrap and Knockout.js,
Knockout.js: Building Dynamic Client-Side Web Applications,
20 Recipes for Programming MVC 3,
and 20 Recipes for Programming PhoneGap. He has been developing websites and web applications for over 20 years. Jamie began his writing career in 2009. As the success of Jamie's blog grew, he turned his writing passion to books about web development in hopes that his many years of experience could be passed on to his readers. 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.
CSS pseudo :before and :after
Related Posts
Tutorials
Learn how to code in HTML, CSS, JavaScript, Python, Ruby, PHP, Java, C#, SQL, and more.