убирать focus-within при клике(:active)
как можно убрать focus-within с элемента списка по клику на ссылку. При фокусе должен меняться фон а при ховере и клике фона быть не должно. Или делать фокус на ссылку, но тогда не захватывает фон где абсолютная стрелка в :after.
вот codepen
$primary: #9D5CD0
$light-primary: #C283F3
$dark-primary: #7943A4
$white: #fff
a
text-decoration: none
ul, li
list-style: none
.bottomnav
background-color: #333
&__list
display: flex
&__item
padding: 2px 20px 2px 5px
&:not(:last-child)
margin-right: 93px
&:focus-within
outline: none
background-color: $primary
&__link
position: relative
display: inline-block
max-width: 200px
font-size: 18px
line-height: 24.5px
color: $white
word-wrap: break-word
transition: color .3s
&::after
content: ''
position: absolute
top: 8px
right: -14px
display: inline-block
width: 8px
height: 8px
border-left: 1px solid $white
border-bottom: 1px solid $white
transform: rotate(-45deg)
transition: border-color .3s
&:focus-visible
outline: none
// background-color: $primary
&:hover
color: $light-primary
&::after
border-color: $light-primary
&:active
color: $dark-primary
&::after
border-color: $dark-primary
<nav class="bottomnav">
<ul class="bottomnav__list d-flex">
<li class="bottomnav__item">
<a href="#" class="bottomnav__link">
Реализм
</a>
</li>
<li class="bottomnav__item">
<a href="#" class="bottomnav__link">
Импрессионизм
</a>
</li>
<li class="bottomnav__item">
<a href="#" class="bottomnav__link">
Постимпрессионизм
</a>
</li>
<li class="bottomnav__item">
<a href="#" class="bottomnav__link">
Авангард
</a>
</li>
<li class="bottomnav__item">
<a href="#" class="bottomnav__link">
Футуризм
</a>
</li>
</ul>
</nav>