Expanding Hyperlinks for Print

Technical Deep Dive & Specifications

1. The Core attr(href) Selector

The CSS attr() function retrieves the value of an attribute of the selected element and uses it in the stylesheet:

@media print {
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    font-weight: normal;
    color: #475569;
  }
}

2. Filtering Irrelevant and Broken Links

If you blindly apply a[href]::after to every link, your printed document will be filled with useless clutter:

• Click here (#) -> Prints: Click here (#)
• Jump to Section 2 (#section-2) -> Prints: Jump to Section 2 (#section-2)
• Run Script (javascript:void(0)) -> Prints: Run Script (javascript:void(0))
• Home (/index.html) -> Prints: Home (/index.html) (Useless without domain!)

To produce professional documents, use CSS attribute substring matching selectors (^=, *=, $=):

@media print {
  /* 1. Only expand external web URLs (http and https) */
  a[href^="http://"]::after,
  a[href^="https://"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #334155;
    word-break: break-all; /* Critical for long URLs */
  }

  /* 2. Format mailto links cleanly */
  a[href^="mailto:"]::after {
    content: " [" attr(href) "]";
    font-size: 8.5pt;
  }

  /* 3. Explicitly suppress internal hash anchors and script links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after,
  a.no-print-url::after {
    content: "" !important;
  }
}

+------------------------------------------------------------------------------------+
|                         CSS ATTRIBUTE SELECTOR LOGIC                               |
+------------------------------------------------------------------------------------+
  Selector               Matches                                Print Action
  ----------------------------------------------------------------------------------
  a[href^="https://"]    Starts with "https://"                 ✅ Expand full URL
  a[href^="http://"]     Starts with "http://"                  ✅ Expand full URL
  a[href^="mailto:"]     Starts with "mailto:"                  ✅ Expand email address
  a[href^="#"]           Starts with "#" (Internal Anchor)      ❌ Suppress (No Value)
  a[href^="javascript:"] Starts with "javascript:"              ❌ Suppress (Security/Noise)

3. Preventing Layout Breakage with word-break: break-all

Modern tracking URLs, tokenized links, and deep API routes can easily exceed 150 characters in length without a single space (e.g., https://example.com/api/v2/auth/callback?token=eyJhbGciOi...).

Without word-breaking rules, the browser will refuse to break the URL string, causing it to push beyond the right physical paper margin and get cut off by the printer edge:

@media print {
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    /* Prevents horizontal overflow past paper edge */
    word-break: break-all;
    overflow-wrap: anywhere;
  }
}

💻 Interactive Code Playground

Below is a complete, runnable HTML document demonstrating smart URL expansion, filtering of internal and JavaScript links, and print-ready formatting.

Starter Code

Line-by-Line Code Breakdown

• Lines 50–53 (a): Resets link color to #000000 with standard underline so links are identifiable on monochrome laser paper.
• Lines 56–63 (a[href^="http..."]::after): Injects the target URL inside square brackets [URL], sets a smaller 9pt font size, and applies word-break: break-all so long query parameters wrap smoothly across lines without clipping.
• Lines 66–69 (a[href^="mailto:"]::after): Extracts and prints email contact endpoints inside angle brackets <mailto:...>.
• Lines 72–76 (a[href^="#"]::after, a[href^="javascript:"]::after): Uses content: none !important to ensure that #table-of-contents, #contact-footer, and javascript:void(0) do not print meaningless text artifacts.

Expected Browser Render Output

• Screen View: A standard interactive security bulletin with blue links and a blue "Print Official Disclosure" button.
• Print Preview (Cmd/Ctrl + P):
  • The "Print" button is hidden.
  • The CVE link reads: CVE-2026-98124 Entry [https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2026-98124].
  • The GitHub link displays the complete repository URL.
  • The email link displays: [email protected] <mailto:[email protected]>.
  • The [Jump to Index] and Verify Security Checksum links do not append any bracketed URLs.