擬似要素はフォーカスに表示されますが、クリックでは表示されません

Question

tabを使用してウェブサイト上をブラウズしているユーザーが、フォーカスが現在どこにあるのか、デフォルトの青色を超えて本当に意味のあるフィードバックを得ることができます通常外れているアウトラインやビジュアルデザインを壊す。

focus州にのみ表示される::after疑似要素を実際に作成することができます。下のスニペットをプレビューすることができます（おそらく古いブラウザではない）。

問題は、ときにクリックを押している間、:active状態をトリガーボタンを彼クリック（ユーザーがそれを見ていないので、それは非表示矢印が可能であるだけでなく、:focus、それは持っていた瞬間から誰かがtabを使用してウェブサイトをブラウズしている場合は、まだそこに持っています。

これを達成するためにCSSを使用する方法は考えられません。それはJavaScriptを通してのみ可能でしょうか？あなたが何かを検索してtabを押してキーボードでブラウズすると、Googleはそれを行っています、あなたはあなたのフォーカスがどこにあるのかを左の矢印で見るでしょう。

編集：私はother questionを見ました。また、JavaScriptのアプローチにも役立ちます。しかし、私の質問は、純粋にCSSでそれを行うことが可能かどうかについてです。たとえば、セレクタでチェーン:active:focusを更新したところ、矢印をクリックすると表示されるようになりました。

.row{ 
 
    text-align: center; 
 
    margin: 1rem 0; 
 
} 
 
button{ 
 
    position: relative; 
 
    text-shadow: 0 0 0; 
 
    box-shadow: 0 0 0; 
 
    background: #eee; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 1rem 2rem; 
 
    transition: all 0.2s ease; 
 
} 
 
button:hover{ 
 
    background: dodgerblue; 
 
    color: #fff; 
 
} 
 
button:active{ 
 
    top: 2px; 
 
    background: #eee; 
 
    color: #888; 
 
} 
 
button:focus{ 
 
    outline: none; 
 
} 
 
button:focus::after{ 
 
    content: "▲"; 
 
    position: absolute; 
 
    bottom: -1.5rem; 
 
    font-size: 1.5rem; 
 
    font-weight: bold; 
 
    color: dodgerblue; 
 
    left: 0; right: 0; 
 
    margin: auto; 
 
    animation: pulsing 1s ease infinite; 
 
} 
 
button:active:focus::after{ 
 
    content: ""; 
 
} 
 
@keyframes pulsing{ 
 
    0%, 
 
    100%{ 
 
    bottom: -1.5rem; 
 
    } 
 
    50%{ 
 
    bottom: -1.75rem; 
 
    } 
 
}

<div class="row"> 
 
    <button>First</button> 
 
    <button>Second</button> 
 
    <button>Third</button> 
 
    <button>Fourth</button> 
 
</div>

Answer 1

私はこの問題のため、純粋なCSSのソリューションがあるとは思いません。編集

...あなたは:hover疑似クラスを使用して、マウスとキーボードの間で異なることを試みることができますが、結果は限りだけで結構です、あなたは、フォーカスのあるボタンを残されていません。私はその多分、body:hoverの回避策を追加しましたあなたには十分ですか？

.row{ 
 
    text-align: center; 
 
    margin: 1rem 0; 
 
} 
 
button{ 
 
    position: relative; 
 
    text-shadow: 0 0 0; 
 
    box-shadow: 0 0 0; 
 
    background: #eee; 
 
    border: 0; 
 
    margin: 0; 
 
    padding: 1rem 2rem; 
 
    transition: all 0.2s ease; 
 
} 
 
button:hover{ 
 
    background: dodgerblue; 
 
    color: #fff; 
 
} 
 
button:active{ 
 
    top: 2px; 
 
    background: #eee; 
 
    color: #888; 
 
} 
 
button:focus{ 
 
    outline: none; 
 
} 
 
button:focus::after{ 
 
    content: "▲"; 
 
    position: absolute; 
 
    bottom: -1.5rem; 
 
    font-size: 1.5rem; 
 
    font-weight: bold; 
 
    color: dodgerblue; 
 
    left: 0; right: 0; 
 
    margin: auto; 
 
    animation: pulsing 1s ease infinite; 
 
} 
 
button:active:focus::after, 
 
button:hover::after, 
 
body:hover button::after{ 
 
    content: "" !important; 
 
} 
 
body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
@keyframes pulsing{ 
 
    0%, 
 
    100%{ 
 
    bottom: -1.5rem; 
 
    } 
 
    50%{ 
 
    bottom: -1.75rem; 
 
    } 
 
}

<div class="row"> 
 
    <button>First</button> 
 
    <button>Second</button> 
 
    <button>Third</button> 
 
    <button>Fourth</button> 
 
</div>