CSS text-emphasis-color Property

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 8 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The text-emphasis-color property in CSS allows web developers to set the color of emphasis marks. Emphasis marks are used in East Asian typography to indicate emphasis, similar to how italics or boldface might be used in Western typography.

This property can be particularly useful when you need to ensure that emphasis marks stand out in a way that aligns with your website's design.

💡 Syntax

The syntax for the text-emphasis-color property is simple. You can specify a color using any valid CSS color value.

Syntax

Copied

element {
  text-emphasis-color: color;
}

Here, color can be a named color, a hexadecimal value, an RGB value, an HSL value, or any other valid CSS color value.

🎛️ Default Value

The default value of the text-emphasis-color property is the same as the currentColor of the element, which means it inherits the color of the text.

🏠 Property Values

Value	Description
named-color	A color keyword, such as blue, red, green, etc.
hexadecimal value	A hex code representing a color, such as #ff5733.
RGB value	An RGB color value, such as rgb(255, 87, 51).
HSL value	An HSL color value, such as hsl(9, 100%, 60%).
currentcolor	The current value of the color property.

📄 Example

In this example, we'll set the text emphasis color to red.

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-color Example</title>
  <style>
    p {
      text-emphasis: circle;
      text-emphasis-color: red;
    }
  </style>
</head>
<body>
  <h1>Text with Custom Emphasis Color</h1>
  <p>This text has a red emphasis mark.</p>
</body>
</html>

🖥️ Browser Compatibility

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

🎉 Conclusion

The text-emphasis-color property is a useful tool for web developers looking to enhance the visual impact of text on their websites, particularly for East Asian typography.

By customizing the color of emphasis marks, you can ensure that your text stands out and aligns with your overall design scheme. Experiment with different colors to see how this property can enhance the readability and aesthetics of your content.