是否有可能让：在伪元素获得焦点时按下tab键 [英] Is it possible to let :after pseudo element get focus when press tab

问题描述

我有一个h1元素，它有一个：在伪元素之后，当首先按tab时，这个h1元素将会获得焦点，但是当我再次按下tab时，焦点会转到下一个REAL元素，我怎么能焦点去伪元素？

HTML：

 < h1 class =titletabindex =0>一些文字< / h1> 
  

CSS：

  title :: after {
 width：16px; 
 height：16px; 
 background：url（'image'）
} 
  

我想让焦点转到这张16X16的图片，是否有可能？

:: before 和 :: after 伪元素不可聚焦。

如果您确实需要此框可聚焦的，你将不得不使它成为一个真正的元素，可能插入使用JS，如果你觉得不舒服污染你的标记。

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?

解决方案

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.

这篇关于是否有可能让：在伪元素获得焦点时按下tab键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！