Highlight empty links

Just before launching a website, I have a checklist that I run through to check everything is set up and working. One of the items on that list is to check all my links are added and active.

Sometimes when I build a website I add a hash symbol (#) as I’m unsure where the link should be going, or the page has not been created yet. I like to add a little CSS snippet which will highlight all empty links on the website.

        /* Highlight empty links */
a[href=""], a[href="#"] {
	position: relative;
}

a[href=""]::before, a[href="#"]::before {
	/* content: ""; */
	position: absolute;
	inset: -5px;
	border: 2px solid red !important;
}
      
Copy