Is it possible to let :after pseudo element get fo

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?

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.