Pseudo-element appear on focus but not on click

Question

The idea is to enable those users that browse through on a website with their keyboard, using tab to get some really meaningful feedback of where their focus is currently at, beyond the default blue outline which usually is missed and or break visual design.

You can in fact create an ::after pseudo-element to appear only on focus state, and you can preview the snippet below that it works fantastic (probably not on old browsers).

The problem is, is it possible to hide the arrow so the user doesn't see it when he clicks on the button (which triggers :active state while click is pressed but also :focus from the moment it has been pressed), but still have it there if someone is using tab to browse through the website.

I cannot think of any way of using CSS for achieving this. Would it only be possible through JavaScript? Google is doing it, if you search for something and press tab and browse with your keyboard, you'll see where your focus is with an arrow on the left.

EDIT: I've seen the other question . And it's helpful for a JavaScript approach. But my question is about whether is possible to do it purely with CSS. For example I've just updated chaining :active:focus in the selector and the arrow now appears only once you release the click.

 .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

I don't think there is a pure CSS solution for this problem. You can try to differ between mouse and keyboard with using the :hover pseudo class, but the result is only fine as long you are not leaving the focused button...

Edit : I added a body:hover workaround, maybe its sufficient for you?

 .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>