Spicing up text with text-emphasis in CSS
There are a lot of ways to style text in CSS. You can change the color, size, font, and even add effects like shadows and outlines. But recently, I learned about a sleek CSS property that I hadn’t heard of before and it’s pretty rad!
It’s called text-emphasis and it’s a shorthand for a combination of text-emphasis-* properties that allow you to add emphasis marks to text. These marks can be used to highlight text in various ways, such as adding a dot, circle, double circle or text above or below the text.
Here’s an example of how you can use text-emphasis to add a dot to text:
.text-emphasis-dot {
text-emphasis: dot;
}
This will add a dot to the top of the text like so.
See the Pen text-emphasis simple by Amit Merchant (@amit_merchant) on CodePen.
You can also add a double circle to the text by using the text-emphasis property like so:
.text-emphasis-double-circle {
text-emphasis: double-circle;
}
Here’s how it looks.
See the Pen text-emphasis simple by Amit Merchant (@amit_merchant) on CodePen.
You can use letters as well to add emphasis to the text. For instance, you can use $ to add a dollar sign under the text like so:
.text-emphasis-dollar {
text-emphasis: '$' lime;
text-emphasis-position: under;
}
The text-emphasis-position property is used to specify the position of the emphasis mark. You can use over, under, right, or left to position the emphasis mark.
Here’s how it looks.
See the Pen text-emphasis double circle by Amit Merchant (@amit_merchant) on CodePen.
Heck! You can even use emojis to add emphasis to the text. For instance, you can use 🔥 to add a fire emoji to the text like so:
.text-emphasis-fire {
text-emphasis: '🔥';
}
Here’s how it looks.
See the Pen text-emphasis text as emphasis by Amit Merchant (@amit_merchant) on CodePen.
I think the text-emphasis property is a fun way to add emphasis to text and can be used to spice up your designs. It’s supported in most modern browsers, so you can start using it today to make your text stand out!
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
