<h1>A Better Focus</h1>
<p>Inspired by <a href="https://www.focusingly.net">Focusingly</a>, a more visually-pleasing focus for keyboard users applied with CSS <code>outline</code> and <code>outline-offset</code>.</p>
<ul>
<li>BEFORE:</li>
<li><a href="#" class="sky">Leonardo</a></li>
<li><a href="#" class="red">Michelangelo</a></li>
<li><a href="#" class="blue">Donatello</a></li>
<li><a href="#" class="black">Raphael</a></li>
</li>
</ul>
<ul class="better">
<li>AFTER:</li>
<li><a href="#" class="sky">Leonardo</a></li>
<li><a href="#" class="red">Michelangelo</a></li>
<li><a href="#" class="blue">Donatello</a></li>
<li><a href="#" class="black">Raphael</a></li>
</li>
</ul>
body {
font: 1.35em/1.75 sans-serif;
margin: 1em;
}
h1 {
font-size: 1.5em;
margin-bottom: .5em;
}
p {
margin-bottom: 1.5em
}
ul {
display: inline-block;
padding-right: 2em;
}
li {
list-style: none;
padding: .25em;
}
li:first-child {
font-size: .75em;
}
li a {
border-bottom: 1px dashed;
text-decoration: none;
}
li a:hover {
border-bottom-style: solid;
}
.better a:focus {
outline: 2px solid;
outline-offset: .15em;
}
.sky {
color: #0fc1ea;
}
.red {
color: #f85e1d;
}
.blue {
color: #0c5ec7;
}
.black {
color: #000;
}
Also see: Tab Triggers