Mikko Tapionlinna Arkkimaagi
Arkkimaagi
/ follow-focus.css
Created
March 7, 2026 06:56
Pure css animated follow focus for tabbing on a website
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :focus-visible{ | |
| anchor-name: --focus; | |
| } | |
| body:focus-within::before { | |
| content: ""; | |
| position: absolute; | |
| border-radius: 100vmax; | |
| top: calc(anchor(--focus center) - 10px); | |
| left: calc(anchor(--focus center) - 10px); | |
| width: 20px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Enabled* | |
| Blocked --> Disabled | |
| Default* | |
| Unhovered* | |
| Hover --> Hovered | |
| Unfocused Unhovered* | |
| Focus --> Focused Unhovered |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ### Keybase proof | |
| I hereby claim: | |
| * I am arkkimaagi on github. | |
| * I am arkkimaagi (https://keybase.io/arkkimaagi) on keybase. | |
| * I have a public key whose fingerprint is D258 B446 3988 F825 AC03 67C7 51F3 A967 FA6C 7304 | |
| To claim this, I am signing this object: |