Anchor elements (<a>) have to be treated slightly differently to other elements to prevent the 'actual' value becoming a link. Rather than nesting <span> elements inside the <a>, we nest the <a> inside a new 'failure' <span>.
<a href="abc.html">ABC</a>
When marked as a failure, with actual value XYZ
, it becomes:
<span class="failure"> _ <span class="expected"> _ <a href="abc.html">ABC</a> _ </span> _ <span class="actual">XYZ</span> _ </div>