styling for span inside anchor tag on Focus

Question

I am trying to style a text inside a span which is inside an anchor tag on focus.

On focus the text should receive an underline. the focus needs to be achieved through tabbing.

But its not working.

Could someone please take look and let me know what am missing

body > div.afterLink > a > span:focus {
  border-bottom: 2px solid green;
}

<div class="beforeLink">
  <span tabIndex=-1>Go to Google</span>
</div>
<div class="titleLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>
<div class="afterLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>

Fiddle

Answer 1

use :focus in a instead

div.afterLink > a:focus > span {
  border-bottom: 10px solid green
}

<div class="beforeLink">
  <span tabIndex=-1>Go to Google</span>
</div>
<div class="titleLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>
<div class="afterLink">
  <a class="download" target="_blank" href="www.google.com" title="Click here">
    <span>Go to Google</span>
  </a>
</div>