如何在伪元素之前使用:: not（：focus）：有效？

Question

我需要只使用CSS，所以请耐心等待。

我有这个结构：

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

用于显示占位符的CSS，以及当用户点击输入时为其设置动画：

.form-element
    &:before
        content: "test"
        top: 0
    &:focus-within
        &:before
            top: 5px

所以，现在我需要使用：not（：focus）：对输入有效，因此标签将保持在顶部：当用户将内容插入输入但点击输入外部时，标签将保持在5px。

这可能吗？我试过这样的东西，但它不起作用：

.form-element
    &:before
        content: "test"
        top: 0
    &:focus-within
        &:before
            top: 5px
    input
        &:not(:focus):valid
            ~ &:before
                    top: 10px
                    left: 20px
                    font-size: 0.9em
                    font-weight: lighter 

以下是我当前的版本：https://codepen.io/cungalunga/pen/zWZwwY，所以我现在需要的是，当输入中有内容并且用户点击.form之外时，我希望占位符保持在顶部 - 元素本身。