我为一个按钮创建了一个动画，如果按钮是一个 div 容器，这个动画效果很好。但是，如果我将相同的 CSS 应用于输入字段，动画就会中断。有人可以解释为什么会这样以及如何解决吗？
这是我的 CSS 的样子：
.submit__button {
font-family: BentonSans;
font-weight: 500;
font-size: 0.9rem;
padding: 0.78125rem;
line-height: 60px;
display: flex;
border: 2px solid #303333;
margin: 2rem auto 0;
transition: 0.5s;
-webkit-transition:0.5s;
position: relative;
vertical-align: middle;
color: #303333;
display: inline-block;
text-align: center;
transition: 0.5s;
padding: 0 20px;
cursor: pointer;
-webkit-transition:0.5s;
}
.submit__button:hover {
border: 2px solid rgba(0,0,0,0);
color: #303333;
}
.submit__button::before, .submit__button::after {
width: 100%;
height:100%;
z-index: 3;
content:'';
position: absolute;
top:0;
left:0;
box-sizing: border-box;
-webkit-transform: scale(0);
transition: 0.5s;
}
.submit__button::before {
border-bottom: 2px solid #000;
border-left: 0;
-webkit-transform-origin: 0% 100%;
}
.submit__button::after {
border-top: 0;
border-right: 0;
-webkit-transform-origin: 50% 50%;
}
.submit__button:hover::after, .submit__button:hover::before {
-webkit-transform: scale(1);
}
动画是用伪元素来实现::before的div。因此，它的工作非常好。
然而，伪元素不支持或不可靠的那些自我封闭相似的元素input，img，br等伪元素应用到这些自我封闭标签将不会在DOM可见。
根据MDN，
替换的元素是其外观和尺寸由外部资源定义的任何元素。实例包括图像（
<img>标记），插件（<object>标签），和形式的元件（<button>，<textarea>，<input>，和<select>标签）。所有其他元素类型都可以称为非替换元素。
::before并且::after只适用于非替换元素。
另外，@ UserreiGheorghiu用户提到：
从关于该主题的“生活标准”的内容来看，看起来
::before并且::after使用仅限于可以包含其他类型 (HTML) 元素节点的元素。这就是为什么<textarea>，虽然是成对的标签，但不能有::before和::after。它只能包含文本节点。
笔记
然而，有时可以使伪元素与img标签一起工作（一些浏览器确实支持它）。
img {
display: block;
content: "";
height: 50px /* height of image in px */
}
添加：style="background-image: url(image.jpg)"到您img在 html 中的元素。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句