30秒学会 CSS 片段 – 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.

预览

HTML

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

CSS

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

翻译自：https://www.30secondsofcode.org/css/s/display-empty-links