<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;
}