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
CSS Updates - New Properties for Styling Text Decorations & Underlines
With the introduction of new text-decoration properties, we can now style text decorations with greater control and precision. The text-decoration property serves as shorthand for multiple decoration properties, while specific properties like text-underline-offset and text-decoration-skip-ink provide fine-grained control over underlines and text decoration behavior.
Syntax
selector {
text-decoration: line style color thickness;
}
The text-decoration Shorthand Property
The text-decoration property is shorthand for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness. Additional properties like text-decoration-skip-ink and text-underline-offset must be specified separately.
Example
Let us see an example to use the shorthand property to decorate text −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration: dotted underline purple 3px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Text appears with a dotted purple underline that is 3px thick.
Text Decoration With Underline and Overline
We can set both underline and overline on text using the text-decoration-line property −
text-decoration-line: underline overline;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 3%;
font-size: x-large;
text-decoration-line: underline overline;
text-decoration-style: dotted;
text-decoration-skip-ink: none;
text-decoration-thickness: 4px;
}
</style>
</head>
<body>
<p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
Text appears with both dotted underline and overline, each 4px thick, without skipping ink around descenders.
Text Decoration Skip Ink Control
The text-decoration-skip-ink property controls how underlines and overlines behave when they encounter character descenders and ascenders. The possible values are −
auto − Skip underlines/overlines when passing through character descenders. This is the default behavior.
none − Draw underlines and overlines across the full length of text content, including parts that cross over glyph descenders and ascenders.
Example
The following example demonstrates various text decoration properties −
<!DOCTYPE html>
<html>
<head>
<style>
#one {
text-decoration-style: double;
text-decoration-skip-ink: auto;
}
p {
padding: 2%;
font-size: 18px;
text-decoration-line: underline overline;
text-decoration-style: wavy;
}
p:nth-of-type(even) {
text-decoration: overline;
}
span {
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
<p>Random Demo Text</p>
<p>Random <span>Demo</span> Text</p>
</body>
</html>
Three paragraphs appear: first with double wavy underline and overline with auto ink skipping, second with only wavy overline, and third with wavy underline/overline plus a line-through on the word "Demo".
Conclusion
The new CSS text decoration properties provide enhanced control over text styling. The shorthand text-decoration property simplifies common decorations, while individual properties like text-decoration-skip-ink offer precise control over decoration behavior.
221 Views
