style.css
index.html
a { color: green; } /* :focus is triggered always. */ a:focus { outline: none; } /* :focus-visible will only trigger on keyboard tab through */ a:focus-visible { outline: 0.1rem solid currentColor; outline-offset: 0.2rem; border-radius: 0.1rem; }
<!DOCTYPE html> <html> <head> <title>Pseudo-focus</title> <link href="style.css" rel="stylesheet"> </head> <body> <p>This is a paragraph with <a href="#">a link</a> in it.</p> <p>And another one with <a href="/topic/css">another link</a>.</p> </body> </html>