Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS text-emphasis Property

Posted in CSS Tutorial
Updated on Jul 19, 2024
By Mari Selvan
👁️ 7 - Views
⏳ 4 mins
💬 1 Comment
CSS text-emphasis Property

Photo Credit to CodeToFun

🙋 Introduction

The text-emphasis property in CSS is used to apply emphasis marks to text, which is commonly used in East Asian typography. These emphasis marks can be shapes such as dots, circles, or custom symbols, and they are placed alongside the text to highlight or emphasize it.

This property is useful for enhancing the readability and visual appeal of your text content.

💡 Syntax

The text-emphasis property is a shorthand for setting text-emphasis-style and text-emphasis-color. The basic syntax is as follows:

Syntax
Copied
Copy To Clipboard
element {
  text-emphasis: emphasis-style emphasis-color;
}
  • emphasis-style: Defines the shape and position of the emphasis mark.
  • emphasis-color: Defines the color of the emphasis mark.

🎛️ Default Value

The default value of the text-emphasis property is none, which means no emphasis marks are applied.

🏠 Property Values

Emphasis Style:

ValueDescription
noneNo emphasis mark.
[shape]A specific shape such as dot, circle, double-circle, triangle, or sesame.
[string]A custom symbol provided as a string.

Emphasis Color:

ValueDescription
[color]Any valid CSS color value, such as named colors, hexadecimal values, RGB values, or HSL values.

📄 Example

In this example, we'll apply a dot emphasis mark to a paragraph of text in red color.

index.html
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS text-emphasis Example</title>
  <style>
    p {
      text-emphasis: dot red;
    }
  </style>
</head>
<body>
  <h1>Text with Emphasis Mark</h1>
  <p>This paragraph has an emphasis mark applied to it.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-emphasis property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The text-emphasis property is a powerful tool for adding emphasis marks to your text, enhancing both its readability and visual appeal.

By customizing the style and color of the emphasis marks, you can create unique and engaging text presentations. Experiment with different shapes and colors to see how this property can add a distinct touch to your web projects.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy