<h1>Using CSS to prevent HTML Errors: anchors</h1>
<a>Fail, no href</a>
<a href>Fail, null href</a>
<a href="">Fail, empty href</a>
<a href="#">Fail, href="#"</a>
<a href="javascript:void()">Fail: Javascript href</a>
<a href="https://dev.to/inhuofficial">A valid and working link!</a>
/*
development only style sheet
*/
a:not([href]),
a[href="#"],
a[href=""],
a[href^="javascript:" i]
{
outline: 4px solid red;
text-decoration: none;
}
a:not([href]):after,
a[href="#"]:after,
a[href=""]:after,
a[href^="javascript:" i]:after{
content: "Enter a valid href attribute, you idiot sandwich!";
position: absolute;
background: darkmagenta;
color: #fff;
padding: 1rem;
border: 5px solid #fff;
margin-left: 1rem;
}
/*
production (and development) style sheet
*/
a{
margin: 5rem 0;
display: block;
outline: 2px solid green;
}
This Pen doesn't use any external JavaScript resources.