当按下Tab键时，是否可以让:after伪元素获得焦点？

Question

我有一个h1元素，它有一个:after伪元素。当我首次按Tab键时，这个h1元素将获得焦点，但是当我再次按Tab键时，焦点将转移到下一个真正的元素，我该如何使焦点转移到伪元素？

HTML:

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

CSS（层叠样式表）：

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

我想让焦点放在这个16X16的图像上，这可能吗？

- richie

Answer 1

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

如果您绝对需要使此框成为可聚焦的，则必须将其制作为实际元素，可能使用JS插入，如果您不想污染您的标记，则可以这样做。

- BoltClock

Answer 2

经验不是很丰富，但如果您将伪元素与标签结合使用，它将成为其一部分，因此可以聚焦。我在注册表单末尾的“服务条款”复选框中使用此功能。如果您将旧复选框缩小并将其放置在新的绝对定位下方，甚至可以正确显示验证提示工具提示！

- Rayray