Active Link marker CSS mod

[dude99]

Have you ever open so many links one after another in the background that you missed a few of 'em? But you sure did CLICK on all of 'em, but somehow the browser fail to register all the clicks because of... REASON!


Here is a simple CSS mod combine with Web CSS manager Stylus extension to let you know when your click is registered by the browser:

Simply switch color version

a:active {filter: invert(1) !important;}

Flash 3 times when holding button

a:active {animation: flk .15s steps(2) 0s 3;}
@keyframes flk {50% {filter: invert(1);}}

Keep flashing when holding button

a:active {animation: flk .15s steps(2) 0s infinite;}
@keyframes flk {50% {filter: invert(1);}}

---

ReadMe

1. In stylus manager, create new CSS mod with above code, change URL/domain option to Everything by click on "-" button. Click SAVE to apply.

2. If you did it correctly, when you clicked on a link (or link image) with LEFT/RIGHT or MMB, it will flash inverted color for a moment. That's how you know the click work!

Related CSS mod: Target="_Blank" Link marker & toggler

That's all. Hope this mod is useful to you.

[barbudo2005]

@dude99 Thanks.

[dude99]

Replace a:active with a:is(:active, :focus-within) if you want the marker effect to last even after released the mouse button.

1. This will add extra benefit as reminder for last clicked/opened link in the webpage (even when you return to previous accessed tab).

2. You will know you have targeted the correct link when performing Mouse Gesture to open link, & evoke context menu via Right mouse button.

---

Example: This CSS code will made last clicked/opened link keep blinking, until you click on something else in the webpage:

a:is(:active, :focus-within) {cursor: progress !important; animation: flk 1.2s steps(2, jump-none) 0s infinite;}
@keyframes flk { 0% {opacity: 0.3;} 16.67% {opacity: 1;} }