如何使用:not(:focus):valid选择器定位表单的::before伪元素？

没问题，我来帮你调整CSS代码，实现输入内容后即使失去焦点，伪元素也保持上移的效果！

首先要注意两个核心要点：

• 给父元素.form-element设置相对定位，让伪元素的定位有明确参照
• 给input添加required属性，这样:valid选择器才能在输入内容后生效（因为:valid需要输入框满足验证规则，required能确保非空内容即为有效）

完整代码示例 #

HTML（需补充required属性）

<div class="form-element">
  <input type="text" required>
</div>

CSS（用Sass嵌套写法，也可转成普通CSS）

.form-element {
  position: relative;
  padding-top: 18px; /* 预留伪元素上移后的空间，避免内容重叠 */
  
  input {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 220px;
    font-size: 1em;
  }

  &:before {
    content: "test";
    position: absolute;
    top: 18px; /* 初始位置与输入框顶部对齐 */
    left: 16px;
    color: #999;
    transition: top 0.2s ease, font-size 0.2s ease; /* 添加过渡动画，让效果更平滑 */
    pointer-events: none; /* 防止伪元素挡住输入框的点击交互 */
  }

  /* 输入框聚焦时，触发伪元素上移+缩小字体的动画 */
  &:focus-within:before {
    top: 2px;
    font-size: 0.8em;
  }

  /* 输入框有内容且未聚焦时，保持伪元素的上移状态 */
  &:has(input:not(:focus):valid):before {
    top: 2px;
    font-size: 0.8em;
  }
}

代码细节说明 #

1. 相对定位父元素：.form-element设置position: relative，确保伪元素的绝对定位是基于父元素计算的，不会脱离正常布局流乱跑。
2. 伪元素交互优化：添加pointer-events: none，避免伪元素遮挡输入框的点击、输入等交互操作。
3. 聚焦状态触发：:focus-within选择器会在父元素内的输入框获得焦点时立即触发，让占位符伪元素平滑上移并缩小，形成浮动效果。
4. 内容保持逻辑：:has(input:not(:focus):valid)选择器会在输入框有内容（因required规则，非空即为有效）且失去焦点时，锁定伪元素的上移状态，不会回到初始位置。

如果你的项目需要兼容不支持:has选择器的旧版浏览器，可以考虑调整HTML结构（比如在input旁添加真实的占位符元素），但基于你给定的HTML结构，:has是最简洁的实现方式，目前Chrome、Firefox、Edge等主流浏览器均已支持该选择器。

内容的提问来源于stack exchange，提问作者Miha Vidakovic