# Text Decoration Thickness

Set the thickness of decorative lines on text.

**Widely available.** This feature is well established and works across many devices and browser versions.

Chrome 1 · Edge 12 · Firefox 1 · Safari 1

| Class | Properties | Value |
|-------|------------|-------|
| `tdt:0` | text-decoration-thickness | `0` |
| `tdt:1` | text-decoration-thickness | `1px` |
| `tdt:2` | text-decoration-thickness | `2px` |
| `tdt:3` | text-decoration-thickness | `3px` |
| `tdt:4` | text-decoration-thickness | `4px` |
| `tdt:auto` | text-decoration-thickness | `auto` |
| `tdt:ff` | text-decoration-thickness | `from-font` |

### Media Queries

Prefix a class with a breakpoint to apply it from that width up.

| Class | Properties | Value |
|-------|------------|-------|
| `tdt:0` | text-decoration-thickness | `0` |
| `tdt:1` | text-decoration-thickness | `1px` |
| `tdt:2` | text-decoration-thickness | `2px` |
| `tdt:3` | text-decoration-thickness | `3px` |
| `tdt:4` | text-decoration-thickness | `4px` |
| `tdt:auto` | text-decoration-thickness | `auto` |
| `tdt:ff` | text-decoration-thickness | `from-font` |

### Pseudo Classes

Prefix a class with a state to apply it only while that state matches.

| Class | Properties | Value |
|-------|------------|-------|
| `tdt:0` | text-decoration-thickness | `0` |
| `tdt:1` | text-decoration-thickness | `1px` |
| `tdt:2` | text-decoration-thickness | `2px` |
| `tdt:3` | text-decoration-thickness | `3px` |
| `tdt:4` | text-decoration-thickness | `4px` |
| `tdt:auto` | text-decoration-thickness | `auto` |
| `tdt:ff` | text-decoration-thickness | `from-font` |