External Link Icon
Auto-append an external link icon to any anchor with href starting with http using CSS attribute selectors — no JavaScript.
Quick implementation
/* Target external links (http/https) */
a[href^="http"] {
position: relative;
padding-right: 1.2em; /* Space for icon */
}
/* Add arrow icon */
a[href^="http"]::after {
content: " ↗";
position: absolute;
right: 0;
top: 0;
font-size: 0.8em;
opacity: 0.7;
pointer-events: none;
}
/* Optional: Hover effect */
a[href^="http"]:hover::after {
opacity: 1;
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
Role: You are a CSS expert specializing in modern, accessible styling techniques.
Task: Create a CSS-only solution to visually indicate external links (links starting with http:// or https://) by appending a small arrow icon (↗) to the end of the link text.
Requirements:
1. Use the CSS attribute selector a[href^="http"] to target external links.
2. Use the ::after pseudo-element to insert the icon.
3. Ensure the icon does not interfere with text selection or click events (use pointer-events: none).
4. Provide two variants:
- Variant A: Using a simple Unicode character (↗).
- Variant B: Using an SVG background image via data URI for a custom icon.
5. Ensure the solution works without JavaScript.
6. Handle edge cases:
- Links that are already images (exclude them).
- Links inside navigation menus (optional: reduce icon size).
7. Include comments explaining the logic.
Output format:
- Clean, commented CSS code.
- Brief explanation of how the attribute selector works.
- Accessibility considerations (e.g., aria-label if needed).Why this matters in 2026
As web applications become more complex, maintaining clean separation between logic and presentation is crucial. This technique eliminates the need for JavaScript event listeners or data attributes to identify external links, reducing bundle size and improving initial page load performance. It also ensures the visual cue persists even if JavaScript fails to load or is disabled by the user.
The logic
The [href^="http"] attribute selector matches any anchor element whose href attribute value starts with the string "http". This effectively captures both http:// and https:// URLs while excluding relative links (like /about) or protocol-relative links. The ::after pseudo-element injects content after the link text, and pointer-events: none ensures the icon doesn't block clicks on the actual link.
Accessibility & performance
Screen readers will read the arrow character as "up and to the right arrow" or similar, which may be confusing. To improve accessibility, consider adding aria-label to external links or using a visually hidden span. Performance-wise, this is extremely lightweight as it relies entirely on CSS rendering without any DOM manipulation or JavaScript execution, making it ideal for high-traffic sites.