Html ：：选择器未正确显示后

：：选择器未正确显示后

我正在尝试为我的另一个创建与相同的背景效果，而它显示为

CSS:

---

检查此固定代码。我想这会对你有帮助

正文{
背景色：#f0；
}
标签{
字体系列：monospace；
字号：17px；
z指数：-1；
边界：0；
}
跨度{
转变：转变1s.2s；
}
跨度{
位置：相对位置；
利润上限：-33px；
显示：块；
填充：.6em0；
左侧填充：5px；
}
.用户名{
位置：相对位置；
z指数：1；
显示：内联块；
宽度：300px；/*输入字段宽度*/
}
输入{
背景：透明；
边框：1px纯黑；
背景：透明；
大纲：0；
宽度：230px；
高度：34px；
z指数：1；
保证金：0；
边界：0px；
} 
输入：焦点{
大纲：1；
}
/*
输入：焦点{
变换：scale3d（1,1,1）；
过渡：宽度5s；
过渡延迟：3s；
过渡计时功能：立方贝塞尔（0.2,1,0.3,1）；
z指数：-1；
背景：绿色；
} */
标签：：之后{
内容：''；
位置：绝对位置；
最高：100%；
左：0；
宽度：233px；
身高：50%；
转变：转变1s；
}
标签：：之后{
z指数：-1；
背景：绿色；
变换：scale3d（1,0.2,1）；
变换原点：0%0%；
}
输入：焦点+标签：：后{
变换：scale3d（1，-1.9,1）；
过渡时间函数：线性；
}

试验
登录
用户名
请张贴html代码也。。。您已经尽力放置了CSS，所以继续使用html并创建一个代码段
label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 233px;
  height: 50%;
  transition: transform 1s;
}


label::after {
  z-index: -1;
  background: green;   
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}


input:focus + label::after {
  transform: scale3d(1, -1.9, 1);
  transition-timing-function: linear;
}

input:focus + label > span {
  font-size: 12px;
  transform: translate3d(0, -80%, 0);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}