Re: [csswg-drafts] [css-text-decor-4] Allow percentages in `text-decoration-trim` (#8403)

The more I think about this, the more I become convinced that the solution to _both_ this and #8402 is `text-decoration-length: <length-percentage>` with an initial value of `100%`.

You want outset?

```css
text-decoration-length: calc(100% + .2em);
```

You want inset?

```css
text-decoration-length: calc(100% - .2em);
```

Yes, it’s 11 characters longer than `text-decoration-inset: .2em` but IMO the clarity and flexibility is worth it.

You want to animate from no underline? You can!

```css
@keyframes underline-grow {
 from { text-decoration-length: 0 }
}

.foo {
 animation: underline-grow 1s both;
}
```

You want to animate with a constant speed for each line (when `text-decoration-break` is `clone`)? You _also_ can!

```css
@keyframes underline-grow {
 from { text-decoration-length: 0 }
 to { text-decoration-length: min(100%, 100cqw) }
}

.foo {
 animation: underline-grow 1s both;
}
```

We had similar discussions when we were defining relative color syntax, and in the end we went with the flexibility and clarity of  `calc()` for similar reasons (and I think it was an excellent decision).

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8403#issuecomment-3462727066 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 29 October 2025 17:08:36 UTC