CSS text-emphasis Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

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

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:

Value	Description
none	No 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:

Value	Description
[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

<!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.