I was given a solution for this using Angular and typescript:

Code

I’m trying to set the color of a span box to red when I ‘:focus’ on a link. The span changes color on ‘:active’, but nothing seems to happen when I use ‘:focus’. The categories will output different types of products on click using angular. At the moment, when I click on one of the filters there is no indication that one of the categories has been activated, heavily impacting the UX. I’m hoping to do this with html and css only if possible.

<div class="checklist categories">
    <ul>
        <li><a><span></span>All</a></li>
        <li><a><span></span>House Favourites</a></li>
      </ul>
 </div> 

.checklist ul li{   
    font-size:14px;
    font-weight:400;
    list-style:none;
  padding: 7px 0 7px 23px;
  cursor: pointer;
}
.checklist li span{
    float:left;
    width:11px;
    height:11px;
    margin-left:-23px;
    margin-top:4px;
    border: 1px solid #d1d3d7;
  position:relative;    
}

.checklist li a{
    color:#676a74;
    text-decoration:none;   
}
.checklist li a:hover{  
    color:#222;
}

.categories a:hover span{   
    border-color:#a6aab3;
}

.checklist .checked span{
    border-color:#8d939f;
}

.checklist a:active span {
  background-color: red;
}

// This code below is the issue as :focus seems to do nothing

.checklist a:focus span {
  background-color: red;
}