Is it possible to let :after pseudo element get focus when press tab

Question

I have one h1 element, which has a :after pseudo element, when firstly press tab, this h1 element will get focus, but when I press tab again, the focus will go to next REAL element, how could I make the focus go to the pseudo element?

HTML:

<h1 class="title" tabindex="0">Some text</h1>

CSS:

title::after {
   width: 16px;
   height: 16px;
   background: url('image')
}

I want to let focus go to this 16X16 image, is it possible?

Cottrill

Answer 1

The ::before and ::after pseudo-elements are not focusable.

If you absolutely need this box to be focusable you will have to make it a real element, possibly inserted using JS if you don't feel comfortable polluting your markup.

Sita

Answer 2

Not very experienced but if you combine the pseudoelement within a label it will be part of it and thus can be focussed. I use this with the 'terms of service' checkboxes at the end of my register form. If you make the old checkbox smaller and put it right under the new absolute positioned one you even get the validation hint tooltip correct!

Kola