Html 我可以在同一个元素上使用多个伪选择器聚焦于before/after吗？

我正在尝试将伪选择器与伪元素结合使用，以创建自定义工具提示

我的HTML：

<input id='test'/>

运行代码的小提琴：

---

当前，由于#测试：聚焦，当聚焦时，输入将变为蓝色，但黑色sqaure不会像我想象的那样显示在#测试：聚焦：之前。

:after和：before不处理替换的元素&

输入是一个替换的元素

选中此项
只能在容器元素上定义伪元素。因为它们在容器本身中作为DOM元素呈现的方式。输入不能包含其他元素，因此不支持它们。另一方面，按钮虽然是表单元素，但支持它们，因为它是其他子元素的容器


：：after
和
：：before
伪元素现在使用双冒号，以避免与伪类混淆（它们显然使用
：
），尽管旧版本的IE（7,8）无法识别双冒号。。如果您试图支持它们，请记住这一点。
这不起作用，因为
input
，与
img
一样，元素是无效/替换的元素，并且没有“内容”可言，因此在元素中似乎没有插入伪元素的位置

例如，使用
div
，可以使用多个psuedo选择器，例如：

div:hover::before {
    /* CSS */
}


参考资料：



您可以通过使用CSS伪类实现您想要做的事情。

只需将
输入
元素包装在
（或任何容器元素）中，如图所示：



#试验{
位置：相对位置；
}
#测试：焦点{
背景色：#08c；
}
#mydiv:焦点在：：之后{
内容：“小心！此字段区分大小写！”；
}