Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS text-emphasis property
The CSS text-emphasis property is used to apply emphasis marks to text elements. It allows you to add decorative marks above or below text while also controlling their color and style.
Syntax
selector {
text-emphasis: text-emphasis-style text-emphasis-color;
}
Property Values
| Property | Description |
|---|---|
text-emphasis-style |
Defines the type of emphasis marks (filled, open, dot, circle, etc.) |
text-emphasis-color |
Sets the foreground color of the emphasis marks |
Example: Basic Text Emphasis
The following example demonstrates how to apply emphasis marks to text −
<!DOCTYPE html>
<html>
<head>
<style>
.emphasis-text {
font-size: 24px;
text-emphasis: filled circle red;
margin: 20px 0;
}
.emphasis-dot {
font-size: 20px;
text-emphasis: filled dot blue;
margin: 20px 0;
}
</style>
</head>
<body>
<p class="emphasis-text">This text has red circle emphasis marks.</p>
<p class="emphasis-dot">This text has blue dot emphasis marks.</p>
</body>
</html>
Text appears with red filled circles above the first paragraph and blue filled dots above the second paragraph, creating emphasis decoration.
Example: Different Emphasis Styles
You can use various emphasis styles like open shapes and different colors −
<!DOCTYPE html>
<html>
<head>
<style>
.open-circle {
font-size: 18px;
text-emphasis: open circle green;
margin: 15px 0;
}
.triangle-marks {
font-size: 18px;
text-emphasis: filled triangle purple;
margin: 15px 0;
}
</style>
</head>
<body>
<p class="open-circle">Open circle emphasis marks</p>
<p class="triangle-marks">Triangle emphasis marks</p>
</body>
</html>
The first line displays with green open circles above the text, while the second line shows purple filled triangles as emphasis marks.
Conclusion
The text-emphasis property provides an effective way to add visual emphasis to text using decorative marks. It combines style and color properties to create distinctive text highlighting effects.
Updated on: 2026-03-15T12:04:40+05:30
179 Views
Advertisements