Почему не закрашивается карточка при фокусе ссылки

Question

Есть данная карточка, почему при фокусе ссылки не закрашивается нижняя часть в нужный мне цвет?

<li class="section-playlist__item">
          <div class="section-playlist__card">
            <div class="section-playlist__img section-playlist__seventh-img">
              <svg class="section-playlist__card-flag" width="24" height="20" viewBox="0 
              </svg>
            </div>
            <div class="section-playlist__card-info">
              <p>Ploho</p>
              <a class="section-playlist__card-link" href="">3 последних альбома</a>
            </div>
          </div>
</li>

Фокус:

.section-playlist__card-link:focus-visible .section-playlist__item {
    background-color: blue;
}

Answer 1

Можно, конечно, решить эту проблему вот так:

.section-playlist__card-link::before {/*создаём псевдоэлемент для ссылки, чтобы в будущем при фокусе на ней, иметь возможность менять этот псевдоэлемент (НО!)*/
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blue;
  opacity: 0;
  z-index: -1;
}
.section-playlist__card-link:focus-visible::before {
  opacity: 1;
}
.section-playlist__item {/*(То самое НО!) Родителем для псевдоэлемента ссылки делаем карточку playlist'а*/
  position: relative;
}

<li class="section-playlist__item">
  <div class="section-playlist__card">
    <div class="section-playlist__img section-playlist__seventh-img">
      <svg class="section-playlist__card-flag" width="24" height="20" viewBox="0" </svg>
    </div>
    <div class="section-playlist__card-info">
      <p>Хорошо</p>
      <a class="section-playlist__card-link" href="">3 последних (или не очень) альбома</a>
    </div>
  </div>
</li>

БЛОГ НА HUSL

Почему не закрашивается карточка при фокусе ссылки

Ответы (1 шт):