为什么转换原点：底部不起作用？

Question

我试图让一条线出现在输入框的“下方”焦点时。 出于某种原因，转换原点“左”（也就是说，如果我将其更改为“右”，它将从右侧出现，但“左”则从左侧出现）有效，但“底部”不起作用，并且保持不变出现在上面。

 .wrap-input{ width: 100%; position: relative; border-bottom: 2px solid #adadad; height: 49px; } .inputForm { font-size: 15px; color: #555555; line-height: 1.2; display: block; width: 100%; height: 45px; padding: 0 5px; outline: none; border: none; } .wrap-input::before{ content: ''; height: 2px; background: linear-gradient(90deg, rgba(128,0,0,1) 15%, rgba(238,174,150,1) 49%, rgba(128,0,0,1) 85%); display: block; transform: scale(0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transform-origin: left bottom;/*this line is problem*/ } .wrap-input:hover::before { transform: scale(1, 1) }

 <div class="wrap-input" data-validate="Valid email is: info@johndoe.com"> <input class="inputForm" type="text" name="email" placeholder="Email"> </div>

Answer 1

我怀疑 transform-origin 不是你所需要的——它告诉系统任何转换发生的点——它相对于它所在的元素，而不是任何“所有者”/父/祖先。

要将伪元素放置在输入元素下，此代码段为其提供绝对位置和左 0 和底部 0 - 这些是相对于实际 div 本身的。

 .wrap-input { width: 100%; position: relative; border-bottom: 2px solid #adadad; height: 49px; } .inputForm { font-size: 15px; color: #555555; line-height: 1.2; display: block; width: 100%; height: 45px; padding: 0 5px; outline: none; border: none; } .wrap-input::before { content: ''; height: 2px; background: linear-gradient(90deg, rgba(128, 0, 0, 1) 15%, rgba(238, 174, 150, 1) 49%, rgba(128, 0, 0, 1) 85%); display: block; transform: scale(0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transform-origin: left center; position: absolute; left: 0; bottom: 0; width: 100%; } .wrap-input:hover::before { transform: scale(1, 1) }

 <div class="wrap-input" data-validate="Valid email is: info@johndoe.com"> <input class="inputForm" type="text" name="email" placeholder="Email"> </div>