Inset Underline Reveal

A nav-link hover effect where the underline collapses to invisible at rest and grows out from the center on hover — using the brand-new CSS `text-decoration-inset` property instead of the usual `::after` pseudo-element + `transform:scaleX()` trick (or a `background-image` gradient hack) most sites still reach for. `text-decoration-inset` shifts where a text-decoration line starts/ends relative to the text run; one value insets both ends symmetrically, so animating it from `50%` (both ends pulled to the middle — zero visible line) to `0%` (full width) on `:hover` is a pure-CSS 'grow from center' underline reveal, which Chrome's own team calls out by name as this property's intended use case. **Real, current, sourced — not invented:** Chrome's 'New in Chrome 154' post (developer.chrome.com/blog/new-in-chrome-154, published 2026-09-22, the day Chrome 154 went stable) ships `text-decoration-inset` and explicitly describes animated underline-reveal effects as the motivating use case; the W3C/WHATWG `web-features` project's own tracking issue (web-platform-dx/web-features#4462) independently corroborates the same feature and additionally states Firefox shipped it in **Firefox 146** and Safari has it only in **Safari Technology Preview** (not yet a stable Safari release) — two sources, not one blog's guess. **Cross-engine status, stated precisely, not rounded up:** that puts this at 2 of 3 engines in a *stable* release (Chrome 154, Firefox 146) with Safari still preview-only — MDN accordingly marks it an experimental/non-Baseline technology. Checked for overlap first: no existing entry in this catalog touches `text-decoration-inset`, `text-decoration-thickness`, or underline styling of any kind — genuinely new ground. **Fit check — DIY $999 tier, real, strong fit:** zero WebGL, zero scroll-jacking, zero JavaScript — a nav-link or footer-link hover state is exactly the small-business-site chrome that tier ships; not added to `docs/diy-website-style-catalog.md` this run — that file is still missing, see this run's log entry (now day 45 of the same gap). **Honest fallback, verified this run, not assumed:** the base rule is a plain always-visible underline (`text-decoration-line:underline`) with real link color/thickness — a link that is never broken, never invisible, with or without the enhancement. The inset-collapse-and-grow behavior, and the small 'hover a link' caption, are both gated behind `@supports (text-decoration-inset: 50%)`, which a real headless-Chromium check this run confirmed evaluates to `false` on this sandbox's own pinned Chromium (**153.0.8010.12** — unchanged from day 44, one stable version short of the Chrome 154 threshold this feature needs). A `getComputedStyle` check on page load confirmed `text-decoration-line` computes to `"underline"` on all three demo links (the fallback genuinely renders, not a blank/broken state) and that the supports-gated caption computes `display:"none"` (correctly hidden, not silently shown-but-wrong) — the same 'never broken, never half-done' bar every entry in this catalog is held to. (Vanilla example: live iframe preview + HTML/CSS tabs, no JS tab at all.)

<div class="tdir-demo">
  <nav class="tdir-row">
    <a class="tdir-link" href="#">Pricing</a>
    <a class="tdir-link" href="#">Catalog</a>
    <a class="tdir-link" href="#">Contact</a>
  </nav>
  <span class="tdir-note">Hover a link — needs Chrome 154+ / Firefox 146+</span>
</div>