Art Direction Daily

Results for

underline text-decoration-inset

No. 177, Sunday, November 8, 2026. Seven results, about 5 min to read.

CSSchromestatus.com › release-notes › 157 › text-decoration-inset

Chrome 157 ships text-decoration-inset

Nov 3, 2026.The new property sets how far an underline, overline or line-through sits in from the start and end of its text. It takes auto, a length or a percentage, with one value for both ends or two for each end separately.

Until now, a link underline that stopped short of the word meant a pseudo-element or a background gradient, and both broke when the link wrapped onto a second line. The release notes frame it as a way to adjust decoration spacing and build reveal effects with the decoration the browser already draws. WebKit has it too: Safari Technology Preview 252 added percentage values in September.

Macro photograph of blank lead type slugs in a composing stick, with a brass rule beneath that stops short of the line's end
text-decoration-inset: .4emThe rule stops short at both ends.
Close-up of the end of a line of lead type slugs, with a brass rule running past the last slug onto the paper
text-decoration-inset: -.3emA negative value runs it past the text.

“Adjust decoration spacing and create reveal effects with native text decorations.”

Chrome Platform Status, Chrome 157 notes
Shipped
Chrome 157 stable, November 3
Values
auto, a length, a percentage
Syntax
One value for both ends, or two for start and end
Fallback
Other browsers draw the full underline, which is fine

Toolsfigma.com › release-notes

Tooling: Figma's Select area now finds the object for you

Nov 6, 2026.Select area can detect an object inside an image and select it in one click, where it used to be traced by hand.

It is in the macOS desktop app only for now. That shortens the cutout step before a product shot goes into a layout.

CSSchromestatus.com › release-notes › 157 › text-overflow

Technique: the custom clip string is now stable

Nov 3, 2026.text-overflow now takes a string, so a clipped line can end in a word such as “(more)” in place of the ellipsis. Issue 168 covered it in beta; it is now on by default for every Chrome user.

Keep the plain ellipsis declared first. Browsers that do not understand the string drop that second line and keep the first.

.snippet-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* fallback */
  text-overflow: " (more)";
}
.result-title {
  text-decoration: underline 2px;
  text-underline-offset: .22em;
  text-decoration-inset: .45em;
}
.result-title:hover { text-decoration-inset: 0; }

Two anchor values were renamed

The position-visibility values are now spelled anchor-valid and anchor-visible, singular, after a CSS Working Group resolution. The plural spellings still work as deprecated aliases and are due to be removed later, so update tooltip and popover CSS now.

Platformchromestatus.com › release-notes › 157

Workflow: two platform changes to test this week

HTML in canvas

The same notes list new primitives for drawing rendered HTML into a canvas, covering layout, drawing and keeping the DOM and the canvas in sync. Expect it in editor and whiteboard tools before it reaches marketing pages.

Overscroll Areas, as an origin trial

An element can anchor to the overscroll area of another and be revealed with a swipe, the gesture behind pull-out drawers and swipe-to-reveal actions. It runs as an origin trial, so register a token before building a mobile pattern on it.

PatternBorrow this pattern

Inset link underlines that complete on hover

Use it on any list of links that people scan: search results, a blog index, a docs sidebar, a footer. The short underline marks the title as a link without drawing a heavy rule under every line, and filling it out on hover confirms the target.

  1. Set the inset in em, so it scales with the title size.
  2. Keep the underline itself. Other browsers draw it full width, which still reads as a link.
  3. Change only the inset on hover, never the color alone, so the cue holds for color-blind readers.
  4. Leave body-copy links with a plain underline. The inset is for titles, where the word carries the click.

Live inset

text-decoration-inset: 0.45em;

In Chrome 157 this is the native property. Older browsers get the same look from a background gradient, which is what the result titles on this page fall back to.

a.title {
  text-decoration: underline 2px;
  text-underline-offset: .22em;
  text-decoration-inset: .45em;
}
a.title:hover { text-decoration-inset: 0; }

Promptartdirectiondaily.com › prompts

Prompt Lab: a directory search results page

Works in Claude Code, Beaver Builder AI, Framer, Webflow and v0.

Paste into your builder, then fill the brackets.

Build the search results page for [directory name], a directory of [what it lists, such as local studios, templates or suppliers]. It is a real page a client would pay for: people land here from the site search and need to scan, filter and click.

Layout, desktop:
- A slim top bar with the logo and three text links.
- A query line: a small uppercase "Results for" label above the search terms set in a monospace face inside a bordered box, then one stats sentence (result count and a short note).
- A three-column grid: a 200px facet rail on the left, a results column in the middle, a 340px knowledge panel on the right.
- The facet rail is a numbered list of result types, each with its count, as real jump links. Make it sticky and highlight the type on screen with an IntersectionObserver.
- The first result is a "top result" card on a lighter surface with the main heading, a two-sentence summary, one solid button and one text link.
- Every other result opens with a breadcrumb path in monospace (domain › section › page) and a small solid type label, then a linked title, then one or two sentences of snippet. Separate results with 1px rules, not cards.
- The knowledge panel holds one photograph at 4:3, a label, a name, one italic line, a short description, six tags and a two-column facts list.
- Below the results, a wide dark panel for one featured pattern, then pagination as three bordered tiles (previous, index, next).

Signature detail: result titles use text-decoration: underline 2px; text-underline-offset: .22em; text-decoration-inset: .45em; and on hover text-decoration-inset: 0, so the underline stops short of the title until it is pointed at. Wrap it in @supports (text-decoration-inset: 1px) and fall back to a background gradient underline with box-decoration-break: clone, so wrapped titles keep the inset on each line.

Palette: warm charcoal ground #2B211F with a faint grid of small plus marks in #F2E6DF; text on the ground #F2E6DF with links #86CBE3; near-white #FBF6F2 cards and one pale clay #E8D5CD panel carrying warm brown-black ink #2A1916 and deep cyan-blue links #0B5C7A; brass #9A6E1F (#D9A954 on the ground) for body-link underlines only.

Type: Schibsted Grotesk for headings, labels and buttons; Literata for body text; IBM Plex Mono for breadcrumbs, counts and labels.

Guardrails:
- Body text at least 18px with line height 1.6 or more, lines no longer than about 70 characters.
- All text meets WCAG AA contrast against its actual surface, including small labels and breadcrumbs.
- Hover and focus states on every link and button, 150-180ms easing, and a prefers-reduced-motion rule that removes transitions.
- No fake search input, no fake filter toggles: the query is a static line and the facets are real links.
- No neon, no glow, no gradient text, no purple-blue gradients, no emoji icons.
- Photography has no legible text or logos.

Mobile: the facet rail becomes a sticky horizontal row of bordered links under the query, the knowledge panel moves under the top result, and every grid stacks to one column.

Field note

A thinner news week, but one of the most useful kinds: a property every link on the page can use, with a fallback that degrades to a plain underline.

Sources