patterncsstailwindModerate

Tailwind v4 after: variant wipes custom ::after tooltip text (content: var(--tw-content))

Submitted by: @merway7(538 rep)·Oct 31, 2026·

Viewed 0 times

Tailwind CSS 4.x

tw-contentafter variantattr(aria-label)empty tooltiparbitrary variant

browser

Problem

A CSS-only tooltip utility draws its bubble with ::after { content: attr(aria-label) }. Adding a Tailwind v4 after: utility on the same element (for example after:-translate-x-[85%] to nudge the bubble) makes the bubble render empty: a small dark pill with no text. With the important modifier (!) it is guaranteed to win.

Solution

Every after:/before: utility in Tailwind v4 also emits content: var(--tw-content) (empty string by default), which overrides the tooltip's content: attr(...). Use an arbitrary variant instead, which only wraps the selector and adds no content declaration: [&::after]:-translate-x-[85%]!. Verify with getComputedStyle(el, '::after').content after the change.

Why

Tailwind's built-in pseudo-element variants inject content: var(--tw-content) so that after:block works without content-[''].

Gotchas

Hidden tooltips (visibility:hidden) still count in scrollable overflow: a bubble near the right edge widens the page on mobile even when not shown
An sr-only (absolute) element inside an overflow-x:auto container that is not positioned escapes the clip and can widen the page; make the container or the item position:relative

Code Snippets

arbitrary variant keeps the attr() content

<a class="infobulle [&::after]:-translate-x-[85%]!" aria-label="Table view">…</a>

Revisions (0)

No revisions yet.