<ul>
  <li><a href="#" tabindex="1">Test</a></li>  
  <li><a href="#" tabindex="2">Test 2</a></li>
</ul>

<p>Try to use tab to focus on the links.</p>
a:focus {
  position: relative;
  outline: 10px solid gold;
  z-index: 999;
}

/* Not related */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul:after{
  content:'';
  clear: both;
  display: block;
}
li {
  float:left;
}
a {
  text-decoration: none;
  background: lightgrey;
  padding: 0.5em;
  display: block;
}

body {padding: 2em;font-size:20px;}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.