Chrome 157 reached stable on 3 November 2026 with several CSS features that make everyday UI work easier: text-decoration-inset for precise underline control, custom strings for text-overflow, and new singular anchor-visible / anchor-valid values for anchor positioning.

These are Chrome additions, not yet features that work in every browser. So this tutorial shows each feature together with a fallback, so your pages still look fine everywhere.

1. text-decoration-inset: underlines that fit your design

By default an underline is exactly as wide as the text. Designers often want it a little shorter, longer or shifted, and until now we faked that with background-image gradients or ::after pseudo-elements. text-decoration-inset lets you do it with native decorations.

Syntax

/* one value: applies to start and end */
text-decoration-inset: 20px;    /* shorter underline */
text-decoration-inset: -0.5em;  /* longer underline */

/* two values: start, then end */
text-decoration-inset: 1em -1em; /* shifted toward the end */

text-decoration-inset: auto;     /* browser adds a small gap between adjacent decorated boxes */

Positive values inset the decoration (make it shorter). Negative values outset it (make it longer). The initial value is 0. Per MDN, the property is not inherited and is not part of the text-decoration shorthand, so set it separately.

Example: a polished nav link with a hover reveal

<nav>
  <a href="/tutorials" class="nav-link">Tutorials</a>
  <a href="/blog" class="nav-link">Blog</a>
</nav>

.nav-link {
  text-decoration: underline 0.15em #6c5ce7;
  text-underline-offset: 0.3em;
  text-decoration-inset: 50%;          /* starts hidden: fully inset */
  transition: text-decoration-inset 0.25s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  text-decoration-inset: -0.2em;       /* grows slightly past the text */
}

According to Chrome’s release notes, one goal of the feature is creating reveal effects with native text decorations. The property is animatable “by computed value”, so the transition above works. If the effect doesn’t look right in your layout, try smaller percentages or length values.

Fallback

Browsers that don’t support the property just ignore it and show a normal underline. That’s an acceptable fallback. If you want a different style for them, use @supports:

@supports not (text-decoration-inset: auto) {
  .nav-link { text-decoration: none; border-bottom: 2px solid #6c5ce7; }
}

The auto value and CJK text

auto matters in Chinese typography, where underlines mark proper nouns and adjacent names need separate underlines. With auto, the browser adds a small gap between neighbouring underlined boxes, so they don’t merge into one line.

:lang(zh) u { text-decoration-inset: auto; }

2. text-overflow with a custom string

text-overflow: ellipsis has been around for years. Chrome 157 adds support for a string value, so you can choose what appears where text is cut off:

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " (more)";
}

Remember the usual rules: text-overflow only works when the text actually overflows, so you need overflow: hidden (or similar) and usually white-space: nowrap on a block with a fixed or max width.

Fallback

Declare the classic ellipsis first, then the string. Browsers that don’t understand the string value keep the ellipsis:

.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* fallback */
  text-overflow: " …more";   /* used where supported */
}

Keep the string short, and remember screen readers still read the full text. The indicator is purely visual, so don’t put important information in it.

3. Anchor positioning: anchor-visible and anchor-valid

If you use CSS anchor positioning for tooltips and popovers, Chrome 157 brings a naming fix. The CSS Working Group renamed anchors-valid to anchor-valid and anchors-visible to anchor-visible. Chrome now ships the singular names and keeps the plural ones as deprecated aliases, to be removed later. anchor-valid is also now clearly defined to consider only the default anchor.

These values are used with position-visibility, which controls when an anchored element should be hidden:

.trigger { anchor-name: --help; }

.tooltip {
  position: absolute;
  position-anchor: --help;
  position-area: top;
  position-visibility: anchor-visible; /* hide when the anchor scrolls out of view */
}

Action item: search your stylesheets for anchors-visible and anchors-valid and switch to the singular forms now, before the aliases are removed.

grep -rnE "anchors-(visible|valid)" src/

Putting it together: an article card

Here’s how the features combine in a typical blog card. Every new property has a fallback, so the card looks good in any browser:

<article class="post-card">
  <h3 class="post-card__title">
    <a href="/python-3-15-guide">A Hands-On Guide to Python 3.15's Most Useful New Features</a>
  </h3>
</article>

.post-card { max-width: 22rem; }

.post-card__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* all browsers */
  text-overflow: " …";       /* Chrome 157+: custom string */
}

.post-card__title a {
  color: inherit;
  text-decoration: underline 2px currentColor;
  text-underline-offset: 0.25em;
  text-decoration-inset: 100% 0;   /* hidden until hover where supported */
  transition: text-decoration-inset 0.2s;
}

.post-card__title a:hover {
  text-decoration-inset: 0;
}

In browsers without text-decoration-inset, the title just has a normal underline, which is fine. In Chrome 157, the underline is hidden by default and sweeps in on hover. Give the full title in a title attribute or show it on the post page, because truncated text should never be the only place that information appears.

Other Chrome 157 web platform changes

From the Chrome 157 release notes:

  • Background Fetch now enforces CORS, closing a way to bypass normal fetch security checks.
  • New HTML insertion methods: positional methods (before, after, append, prepend, replaceWith) that take HTML, plus streaming methods that return a WritableStream.
  • Long Animation Frames gains styleDuration and forcedStyleDuration, so you can tell style time apart from layout time.
  • HTML-in-canvas adds primitives to render HTML into canvas.

A safe adoption strategy

  1. Treat new properties as progressive enhancement. Unsupported CSS is ignored, so a sensible fallback costs nothing.
  2. Use @supports when the fallback needs different styling.
  3. Check support data on MDN or caniuse before relying on a feature for anything important.
  4. Test with real content. Long words, translated text and zoom levels all affect underline and overflow behaviour.

Takeaway

Chrome 157 removes a few long-standing CSS workarounds: underlines you can size and animate natively, overflow indicators that say what you want, and clearer anchor-positioning keywords. Add them as enhancements with fallbacks, and your UI gets nicer in Chrome without breaking anywhere else.

Sources: Chrome 157 Release Notes (Chrome Platform Status) · MDN: text-decoration-inset