demo · v142

Wizard Progress

A 5-step installation wizard styled entirely with :target-before, :target-current, and :target-after. Steps before the hash target get a "completed" green border; future steps fade out. Navigate with the buttons or the address bar — no JavaScript for the visual state.

Heads up: :target-before is not detected in this browser. A JavaScript class fallback (.js-before / .js-after) is active — the progress strip and checklist icons still work; section border styles may not apply natively.
1. About
2. License
3. Location
4. Options
5. Install

1. About this installation

Welcome to the Chrome 142 platform feature installer. This wizard demonstrates :target-before and :target-after pseudo-classes by tracking your progress through a multi-step flow using only CSS and URL hash changes.

  • Detect browser support for :target-before
  • Set up progress strip
  • Load feature list
Next: License →

2. License agreement

This demo is provided under the MIT License. By continuing, you agree that CSS pseudo-classes are a fundamentally good idea and that :target-before solves a real problem for wizard and stepper UI patterns.

  • Read license terms
  • Accept terms (click Next)
← Back Next: Location →

3. Installation location

Choose where the conceptual feature should be installed. In a real wizard this would be a directory picker. Here it demonstrates that :target-before applies to every section before #step-3 in the DOM — steps 1 and 2 both get the completed border style.

  • Check available disk space
  • Validate install path
  • Create target directory
← Back Next: Options →

4. Installation options

Configure optional components. :target-after now applies to step 5 only — it fades and shrinks, signalling "not yet". The three completed steps carry a green border via :target-before, with no class toggling in JavaScript.

  • Select feature components
  • Configure startup behaviour
  • Set default permissions
← Back Next: Install →

5. Install

All four prior sections are :target-before and styled green. This is the final step. In a real flow this is where the install runs. Here it confirms the CSS state machine worked end-to-end using only URL hash and the new pseudo-classes.

  • Write feature files
  • Register service worker
  • Verify installation
  • Complete setup
← Back Start over
:target-beforeAll sections that precede the current :target in the DOM. Styled as "completed" — green border.
:target (current)The section whose id matches the URL hash. Bold black border.
:target-afterSections that follow the current target. Faded to signal they are in the future.
Keyboard navigation: Use Tab to move focus to the Next / Back links, then Enter to follow them — the hash changes, the pseudo-classes update, and focus moves to the new section (tabindex="-1" + JS focus()).

relevant CSS

/* Sections before the hash target */
.step-section:target-before {
  border-color: var(--accent-emerald); /* completed */
}

/* Sections after the hash target */
.step-section:target-after {
  opacity: 0.45; /* future / pending */
}

/* The active section */
.step-section:target {
  border-width: 3px;
  border-color: var(--text-black);
  display: block; /* show only the targeted step */
}

/* Feature detect + JS-class fallback */
const supported = CSS.supports("selector(:target-before)");
if (!supported) applyJsFallback();

how the hash approach works

Each <section id="step-N"> is hidden by default (display: none) and revealed only when :target matches. The Next/Back links update the hash. :target-before then automatically applies to all sections that appear before the current one in DOM order — no JavaScript class management needed for the styling.

The progress strip dots use a JavaScript class fallback because the strip is not adjacent to the sections in the DOM tree (CSS sibling selectors can't reach across the layout). This is a documented limitation and the demo shows both approaches side by side.

see also