Use attribute selectors with empty links

1 min read
4899 views

Here’s a quick CSS tip: if a hyperlink doesn’t have a text value, i.e., it rendered empty, insert the href value in its place:

a[href]:empty::before {
  content: attr(href);
}

Why do this? Link text can be overlooked in content generated by a CMS. Rendering the text with the href value will help identify missing text more easily.

I like it.