стиль для span внутри тега привязки в Focus

Я пытаюсь стилизовать текст внутри span, который находится внутри тега привязки в фокусе.

В фокусе текст должен получить underline. фокус должен быть достигнут с помощью табуляции.

Но это не работает.

Может кто-нибудь, пожалуйста, посмотрите и дайте мне знать, что мне не хватает

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>

Скрипка


html css pseudo-class
person Umar    schedule 16.05.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

вместо этого используйте :focus в a

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>

person dippas    schedule 16.05.2016

arrow_upward
1
arrow_downward

Элементы Span не могут быть сфокусированы (если они не имеют атрибута tabindex). Вместо этого поместите селектор :focus на якорь:

body > div.afterLink > a:focus > span {
  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>

person metarmask    schedule 16.05.2016