Style links with no text

Angelos Chalaris · 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);
}

Recommended snippets