html - 如果我添加此代码，则::after 缩放将从更高的像素开始

Question

我正在尝试创建一种效果，当输入获得焦点时，标签将下降并更改字体大小。

但是如果我在下面添加这段代码，::after scaling将从更高的一些像素开始:

input:focus + label > span {
  font-size: 11px;
  bottom: -30px;
} 

如果我exclude它，然后它将适本地缩放。

不确定如何解决这个问题。

Answer 1

我测试了你的代码并发现了这个..

如果你从这个中删除font-size..

input:focus+label>span {
        /*font-size: 11px;*/
        bottom: -30px;
    }

您的代码正在运行。如果添加此 font-size，::after 元素将采用标签的高度，即字体大小。所以解决办法就是增加元素的高度。我尝试使用 padding-bottom，它对我有用。

像这样..

input:focus+label>span {
        font-size: 11px;
        padding-bottom: 20px;
        bottom: -30px;
    }

希望这能解决您的问题。