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!
ð Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
