фокус не работает с flex-box

Question

Там я использую псевдоэлемент для создания границы внизу ссылки.

но фокус не работает, когда я нажимаю на него .................................. //. ................................... // ............. ..................... // ........................... ......... //

ul {
    display: flex;
    list-style: none;
    background-color: gray;
    margin: 0px;
    padding: 0px;
}

li {
    flex: 1;
    text-align: center;
}

li a {
    color: white;
    display: block;
    padding: 10px;
    border: 2px solid gray;
}

.l1::after, .l2::after, .l3::after, .l4::after, .l5::after {
    content: '';
    display: block;
    position: relative;
    left: 0px;
    width: 100%;
    background-color: blue;
    border-bottom: 2px solid red;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.5s;
}

.l1:hover::after, .l1:active::after, .l1:focus::after, .l2:hover::after, .l2:active::after, .l2:focus::after, .l3:hover::after, .l3:active::after, .l3:focus::after, .l4:hover::after, .l4:active::after, .l4:focus::after, .l5:hover::after, .l5:active::after, .l5:focus::after {
    transform-origin: left;
    transform: scaleX(1);
    border-bottom: 2px solid red;
    transition: transform 0.5s;
}

<ul>
    <li class="l1"><a href="#">Home</a></li>
    <li class="l2"><a href="#">Home</a></li>
    <li class="l3"><a href="#">Home</a></li>
    <li class="l4"><a href="#">Home</a></li>
    <li class="l5"><a href="#">Home</a></li>
</ul>