CSS text-emphasis-style Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-emphasis-style property in CSS is used to apply emphasis marks to text, which can help to highlight or stress certain parts of the content.

This property is commonly used in East Asian typography, but it can be applied to any text to add stylistic emphasis.

💡 Syntax

The syntax for the text-emphasis-style property is straightforward. You can specify the emphasis mark using predefined keywords or a string.

Syntax

Copied

element {
  text-emphasis-style: style;
}

Here, style can be one of the predefined keywords or a string representing the custom emphasis mark.

🎛️ Default Value

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

🏠 Property Values

Value	Description
none	No emphasis mark.
accent	Uses the accent mark (emphasis dot).
dot	Uses a small dot as the emphasis mark.
circle	Uses a small open circle as the emphasis mark.
double-circle	Uses a small filled circle with an outer open circle.
triangle	Uses a small triangle as the emphasis mark.
sesame	Uses a sesame dot as the emphasis mark.
string	A custom emphasis mark provided as a string.

📄 Example

In this example, we'll apply a dot emphasis mark to some text.

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-style Example</title>
  <style>
    p {
      text-emphasis-style: dot;
    }
  </style>
</head>
<body>
  <h1>Text with Emphasis Style</h1>
  <p>This text has an emphasis mark applied to it.</p>
</body>
</html>

🖥️ Browser Compatibility

The text-emphasis-style property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, and Edge. However, as with any CSS property, it is advisable to test your website across different browsers to ensure consistent behavior.

🎉 Conclusion

The text-emphasis-style property is a useful tool for adding typographic emphasis to your text content.

Whether you are designing for East Asian languages or simply want to add some stylistic touches to your text, this property offers a range of predefined options and the flexibility to create custom emphasis marks. Experiment with different styles and see how they can enhance the readability and visual appeal of your web projects.