Essentially, the checkboxes displayed here are in a graphical format to avoid using checkbox elements for accessibility reasons (only the link should be interactive).
However, aligning a span next to an href and indenting the text to line up with the start of the text presents quite a challenge.
Here's the Codepen:
ul {
padding: 0px;
margin: 0px;
width: 140px;
background-color: #fffaaa;
margin-bottom: 10px;
list-style: none;
}
span.facetapi-check-active {
background-image: url('https://www.drupal.org/files/project-images/Very-Basic-Checked-checkbox-icon.png');
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-size: 15px 15px;
display: inline-block;
}<ul>
<li>
<span class="facetapi-check-active"></span>
<a href="#" class="facetapi-inactive" id="facetapi-link-12">North West & Other Areas</a>
</li>
<li>
<span class="facetapi-check-active"></span>
<a href="#" class="facetapi-inactive" id="facetapi-link-13">Yorkshire and the Humber</a>
</li>
</ul>