--- title: "CSS Properties text-decoration, text-emphasis, text-overflow, transform, and vertical-align" description: "Let us understand each CSS property text-decoration, text-emphasis, text-overflow, transform, and vertical-align with explanations and examples." author: "Ashutosh Patel" published: 2025-03-25 updated: 2025-03-25 canonical: https://www.mindstick.com/articles/338861/css-properties-text-decoration-text-emphasis-text-overflow-transform-and-vertical-align category: "css-css3" tags: ["css-css3", "css", "css styling", "css property"] reading_time: 4 minutes --- # CSS Properties text-decoration, text-emphasis, text-overflow, transform, and vertical-align 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](https://www.mindstick.com/forum/157996/what-are-some-of-the-most-common-css-properties-used-for-styling-text) Decorations)** The `text-decoration` [property](https://www.mindstick.com/articles/198559/an-ownership-of-property-in-hua-hin) adds styling to text, such as underlining, interlining, strikethrough, or even custom decoration styles. ## Syntax ```css text-decoration: none | underline | overline | line-through | blink | wavy dashed dotted double solid; ``` ## Example ```html Text Decoration Example

This text is underlined.

This text has a line-through.

This text has an overline.

This text has a wavy red underline.

``` ## Note: - You can [combine multiple](https://www.mindstick.com/forum/160929/help-with-writing-a-query-to-combine-multiple-rows-into-one-in-sql-server) styles (for example, make the `underline wavy green`). - `text-decoration-color` and `text-decoration-thickness` allow 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 ```css text-emphasis: none | [ filled | open ] [ dot | circle | double-circle | triangle | sesame ] color; ``` **Example:** Emphasizing Text ```html Text Emphasis Example

This text has a red dot emphasis.

This text has an open circle emphasis.

This text has a sesame-style emphasis.

``` ## Note: - Works well for Asian scripts (such as [Japanese](https://answers.mindstick.com/qa/40653/why-did-japanese-americans-generally-face-more-restrictions-than-italian-or-german-americans-during-world-war-ii)). - 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](https://www.mindstick.com/forum/33993/how-to-wrap-long-text-in-a-table-cell-without-custom-cell) with Ellipsis ```html Text Overflow Example

This is a very long sentence that will be truncated.

``` ## Note: - Only works with `white-space: nowrap` to 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](https://yourviews.mindstick.com/story/1308/four-types-of-human-teeth-amp-their-function)** | **Description** | | --- | --- | | rotate(deg) | Rotates an element. | | scale(x, y) | Resizes an element. | | [translate](https://www.mindstick.com/interview/2625/how-to-translate-in-android)(x, y) | Moves an element. | | skew(x, y) | Skews an element. | **Example:** Rotating, Scaling, and Moving Elements ```html Text Transformations Example
Scaled Box
Moved Box
Skewed Box
Rotated Box
``` ## Note: - It can be combined using `transforms: Rotate (30 degrees) Scale (1.2)`. - Works best with `transitions` for animations. **5.** `vertical-align` **(Aligning [Inline Elements](https://www.mindstick.com/forum/158009/vertical-align-middle-on-inline-elements-slightly-off))** 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 ```html Text Aligning Example

Here is an image Icon aligned with text.

``` ## 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](https://www.mindstick.com/articles/338858/css-properties-explained-clear-clip-path-columns-content-and-counter) --- Original Source: https://www.mindstick.com/articles/338861/css-properties-text-decoration-text-emphasis-text-overflow-transform-and-vertical-align Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.