CODEWITHSUNDEEP
htmlcsspseudo-class
Umar
Umar

Reputation: 1082

styling for span inside anchor tag on Focus

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

Upvotes: 1

Views: 1417

Answers (2)

dippas
dippas

Reputation: 60573

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>

Upvotes: 2

metarmask
metarmask

Reputation: 1857

Span elements cannot be focused (unless they have a tabindex attribute). Place the :focus selector on the anchor instead:

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>

Upvotes: 1

Related Questions