Open
Description
Came across this gem of a false positive. A pseudo element on a previous sibling's child node was used to provide a background color:
<style>
a[href] {
display: table;
margin: 1px 0px 9px;
}
.container {
display: table-cell;
vertical-align: middle;
}
.background {
width: 0px;
margin: 1px 0px 9px;
}
.background:before {
content: '';
background-color: #06c;
display: block;
height: 28px;
width: 140px;
}
.content {
line-height: 28px;
width: 140px;
text-align: center;
color: #eee;
}
</style>
<a href="#">
<div class="container">
<div class="background"></div>
</div>
<div class="content">Canadian Dollar</div>
</a>
Axe-core currently looks at the element and the parent for pseudo elements. When we wrote that we knew it was an imperfect solution. To improve on this I wonder if we just need to find every pseudo element with a background and guestimate its position.