External link icon

Regulatory PDFs live off-site—the outbound icon inherits the link color for hover and visited states.

Download the timber export checklist (PDF) before you file with customs.

Widely Supported

typographymaskno-js

Quick implementation

a[href^="http"]::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-inline-start: 0.25em;
  vertical-align: -0.12em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.3 9.29-1.4-1.42L17.59 5H14V3ZM5 5h6V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-2v6H5V5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M14 3h7v7h-2V6.41l-9.3 9.29-1.4-1.42L17.59 5H14V3ZM5 5h6V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h-2v6H5V5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

Prompt this to your LLM

Docs with mixed internal and external links.

You are adding an external-link icon after absolute URLs.

Goal: CSS-only ::after pseudo with SVG mask and currentColor fill.

Constraints:
- Selector should target a[href^="http"] inside prose.
- Icon size ~0.85em; slight vertical nudge.
- No extra HTML except the anchor.

Return CSS (include a data-URI mask example).

Why this matters in 2026

Users still need to know when a link leaves the product; icons beat verbose “(opens in new tab)” in tight UI.

The logic

Mask + currentColor keeps one rule for default, hover, and visited palettes.

Accessibility & performance

Mark decorative; announce new windows in accessible name if you use target=_blank.