Let us understand each CSS properties text-decoration, text-emphasis,
text-overflow, transform, and vertical-align with explanations and examples.
1. text-decoration (Styling Text Decorations)
The text-decoration property adds styling to text, such as underlining, interlining, strikethrough, or even custom decoration styles.
Syntax
text-decoration: none | underline | overline | line-through | blink | wavy dashed dotted double solid;Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Decoration Example</title>
<style>
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.overline {
text-decoration: overline;
}
.custom-decoration {
text-decoration: underline wavy red;
}
</style>
</head>
<body>
<div>
<p class="underline">This text is underlined.</p>
<p class="line-through">This text has a line-through.</p>
<p class="overline">This text has an overline.</p>
<p class="custom-decoration">This text has a wavy red underline.</p>
</div>
</body>
</html>Note:
- You can combine multiple styles (for example, make the
underline wavy green). text-decoration-colorandtext-decoration-thicknessallow more customization.
2. text-emphasis (Emphasizing Text)
The text-emphasis property allows you to add emphasis marks (dots, circles, or custom marks) above or below text.
Syntax
text-emphasis: none | [ filled | open ] [ dot | circle | double-circle | triangle | sesame ] color;Example: Emphasizing Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Emphasis Example</title>
<style>
.emphasis-dot {
text-emphasis: filled dot red;
}
.emphasis-circle {
text-emphasis: open circle blue;
}
.emphasis-sesame {
text-emphasis: filled sesame green;
}
</style>
</head>
<body>
<div>
<p class="emphasis-dot">This text has a red dot emphasis.</p>
<p class="emphasis-circle">This text has an open circle emphasis.</p>
<p class="emphasis-sesame">This text has a sesame-style emphasis.</p>
</div>
</body>
</html>Note:
- Works well for Asian scripts (such as Japanese).
- Browser support required (mostly WebKit browsers).
3. text-overflow (Handling Overflowing Text)
The text-overflow property controls how text behaves when it flows out of its container.
Example: Truncating Long Text with Ellipsis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Overflow Example</title>
<style>
.truncated {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p class="truncated">This is a very long sentence that will be truncated.</p>
</div>
</body>
</html>Note:
- Only works with
white-space: nowrapto prevent text from wrapping. - Useful for UI elements such as buttons, tooltips, and titles.
4. transform (CSS Transformations)
The Transform property applies 2D and 3D transformations, such as rotating, scaling, and skewing elements.
Basic Transformations
| Function | Description |
| rotate(deg) | Rotates an element. |
| scale(x, y) | Resizes an element. |
| translate(x, y) | Moves an element. |
| skew(x, y) | Skews an element. |
Example: Rotating, Scaling, and Moving Elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Transformations Example</title>
<style>
.rotate {
transform: rotate(4deg);
}
.scale {
transform: scale(0.5);
}
.translate {
transform: translate(20px, 10px);
}
.skew {
transform: skew(20deg);
}
</style>
</head>
<body>
<div>
<div class="scale">Scaled Box</div>
<div class="translate">Moved Box</div>
<div class="skew">Skewed Box</div>
<div class="rotate">Rotated Box</div>
</div>
</body>
</html>Note:
- It can be combined using
transforms: Rotate (30 degrees) Scale (1.2). - Works best with
transitionsfor animations.
5. vertical-align (Aligning Inline Elements)
The vertical-align property aligns inline elements (images, text, icons) relative to their parent text.
| Value | Description |
baseline |
Aligns with the baseline of surrounding text. |
top |
Aligns the top of the element with the top of the tallest element. |
middle |
Centers the element vertically. |
bottom |
Aligns the bottom of the element with the lowest element. |
sub |
Lowers text like a subscript. |
super |
Raises text like a superscript. |
Example: Aligning an Image with Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Aligning Example</title>
<style>
.text-img {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<p>Here is an image <img src="https://www.mindstick.com/Images/mindstick-logo.png" class="text-img" alt="Icon"> aligned with text.</p>
</div>
</body>
</html>Note:
- Works well with inline elements but not with block elements.
- Often used for icons next to text.
Also, read: CSS Properties Explained: clear, clip-path, columns, content, and counter
Leave Comment