Style links with no text

CSS, Visual · Nov 11, 2022

Displays the link URL for links with no text.

  • Use the :empty pseudo-class to select links with no text.
  • Use the :not pseudo-class to exclude links with text.
  • Use the content property and the attr() function to display the link URL in the ::before pseudo-element.
Preview
<a href="https://30secondsofcode.org"></a>
a[href^="http"]:empty::before {
  content: attr(href);
}

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this