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

I believe we are already past the discussion about `text-decoration-length` vs. `text-decoration-inset`. Both have their pros and cons, we previously resolved on the latter and Firefox already shipped it.

To be clear, @LeaVerou's examples (with a centered underline) look like this using `text-decoration-inset`:

Animating from no underline:

```css
@keyframes --underline-grow {
  from { text-decoration-inset: 50% }
}

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

Animating with constant speed:

```
@keyframes --underline-grow {
  from { text-decoration-inset: 50cqw }
}

.foo {
  text-decoration: underline;
  animation: --underline-grow 1s both;
  box-decoration-break: clone;
}
```

Plus growing at the same start time:

```css
@property --text-decoration-max-length {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}

@keyframes --underline-grow {
  to { --text-decoration-max-length: 100cqw }
}

.foo {
  animation: --underline-grow 1s both;
  text-decoration-inset: max(0, calc(100% - var(--text-decoration-max-length) / 2));
}
```

Therefore, both use cases of contant time and constant speed of growing are covered by that. And it seems we already agreed on percentages referring to the total width of decoration box fragments for `box-decoration-break: slice` and the width of each individual decoration box fragment for `box-decoration-break: clone`, right?

So let's make a second attempt to resolve on that.

Sebastian

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


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

Received on Monday, 9 February 2026 14:01:59 UTC