Highlighting Empty Hrefs in Links Using Css

While developing a site, you often put a pile of placeholder links in with a plain <a href="">Link</a>. These can sometimes sneak through because they’re so easily forgotten about.

A simple CSS block will automatically highlight these for you, so you don’t forget:

a[href='']:after {
  content:'!';
  background:red;
  color:#FFFFFF;
  padding-left:3px;
  padding-right:3px;
  opacity:0.3;
  white-space: nowrap;
}
a[href='']:hover:after {
  content:'empty link';
  opacity:1.0;
}

You can adjust the selector if you use href="#" instead of blank ones.