Обновление нижней границы компонента работает при наведении, но не при фокусе [дубликат] ⇐ Javascript

[Anonymous]

У меня есть html-приложение, в котором я хочу обновить нижнюю границу компонента, когда пользователь:

• наводит указатель мыши на кнопку
• переходит на кнопку с помощью клавиши табуляции

Это отлично работает для мыши; все, что мне нужно сделать, это добавить квалификатор наведения в файл .scss.
Однако это не работает, когда я фокусируюсь на кнопке, нажимая на нее табуляцию.
Это мой HTML-код:

Код: Выделить всё

My Button
[i][/i]

В моем файле .scss это работает для обновления нижней границы при наведении курсора мыши на кнопку:

Код: Выделить всё

/* Add a red background color to navbar links on hover */
.dropdown:hover .dropbtn {
border-bottom: 2px solid var(--color-nav-selected); //snl-amber-400
}

Однако это не работает для обновления нижней границы при фокусировке на кнопке путем нажатия на нее:

Код: Выделить всё

.dropdown:focus .dropbtn {
border-bottom: 2px solid var(--color-nav-selected); //snl-amber-400
}

Есть предложения?
Большое спасибо.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -for-focus