Skip to content

Style links with no text

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.

<a href="https://30secondsofcode.org"></a>

a[href^="http"]:empty::before {
  content: attr(href);
}

More like this

CSS · January 29, 2023
Image with text overlay

Displays an image with a text overlay.
CSS · November 23, 2022
Style links without a class

A short summary of your story up to 180 characters long.
CSS · March 6, 2022
Select any link with CSS

You can use a CSS pseudo-class selector to style all links in a page, without worrying if they have been visited or not.
CSS · October 13, 2021
Image text overlay

Displays a text on top of an image using an overlay.