CSS中能否通过:has选择器为包含无效输入的元素设置伪元素？

你的写法把:has()伪类放在了::after伪元素后面，这相当于在找**.InputElement的::after伪元素里包含input:invalid**的情况，但伪元素本身是附加在.InputElement上的虚拟元素，根本不会有input子元素，所以完全匹配不到目标。

正确的写法应该是先通过:has()选中包含无效input的.InputElement父容器，再给这个容器添加::after伪元素：

.InputElement:has(input:invalid)::after {
  content: 'Hello world';
  color: red;
  /* 建议补充定位样式，避免伪元素位置异常 */
  display: block;
  margin-top: 4px;
}

另外需要注意：:has()选择器目前在Chrome、Edge、Safari等主流浏览器已支持，但Firefox默认未开启，需要手动启用layout.css.has-selector.enabled配置项才能生效。

你的React组件代码不需要修改，保持原样即可：

const Input = (props: InputProps) => (
  <div className={classes.InputElement}>
    <input {...props} />
  </div>
)

内容的提问来源于stack exchange，提问作者Shivam Sahil