i've been experimenting with building an animated focus ring using CSS anchor positioning https://codepen.io/hi_mayank/pen/MWNrBpQ
i'm adding a pseudo-element on the body itself, so it requires no extra HTML. and unlike a regular outline, it won't get clipped by adjacent elements or overflow.
issues:
- it does not work for elements focused inside a popover or dialog.
- i'm also trying to animate it but it's not performant bc you cannot use anchored values in transforms.
one day i'd love to be able to access the top layer using CSS only.
just let me do this:
```
body::after {
/* elevates this pseudo-element to the top layer */
overlay: manual;
}
```
i should not have to write any HTML or JS for this.
in my quest for anchored focus rings, i had somewhat of an epiphany today. i can add an `::after` pseudo-element on a top-layer element. works ok if you can ensure the pseudo is unused.
i was also trying to use proximity scoping (with lower boundary) to avoid creating multiple pseudos, but couldn't figure that one out.
@mayank Yep. Not related, but I'd be a bit wary of an unbounded `:has()` like that, haha. Maybe there could be a way to optimize it by doing something like
:has(:focus-visible):scope:focus-within::after {}
I remember that switching the places of selectors by moving :has() to the left helped in a few cases. Plus, we could try to help browsers by telling them to first check if the scope in question has any focus inside at all, and only then try to use `:has()`.
Mayank
Jon
Roma Komarov