我想实现动画，使两个文本不重叠

Question

https://codepen.io/shoumiksk/pen/bGoVdgE

这是我想要实现的代码笔 link，此外，当输入字段中有一些文本时，我不希望标题向下滑动。现在，当我像这样使用 valid 时，标题动画停止

.inputdiv input:valid + .content .contenttext {}

还有其他方法吗？

忽略输入框的mis-alignment，这是根据我的ui

Answer 1

您可以为此使用伪选择器 :placeholder-shown。但是你必须定义一个占位符，在你的情况下是一个空格 placeholder=" ".

结果：https://codepen.io/yourbraineatsyou/pen/XWeZogq

更多信息：https://css-tricks.com/almanac/selectors/p/placeholder-shown/