Question

我正在尝试在输入集中（->从左到右）时获得下划线效果

我看到了很多可以实现的“技巧”。

但是我想知道实现这一目标的最有效方法是什么？

（明智地支持浏览器和语法）

谢谢。

Answer 1

systemd

.input{
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.input > .txt-underline{
  border: none;
  outline: none;
}

.underline{
  transition: all 0.5s;
  display: inline-block;
  bottom: 0;
  left: -100%;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #f00;
}
.input > .txt-underline:focus + .underline{
  left: 0;
}

Answer 2

这是一个简单的示例。

#input {
  position: relative;
  display: inline-block
}

span {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px; /* depending on height */
  height: 5px; /* height of span -like border */
  background: #f00;
  transition: all 0.5s linear;
  width: 0 /* hidden */
}

input:hover ~ span {
  width: 100% /* full width on hover */
}

<div id="input">
  <input type="text" placeholder="input" /><span></span>
</div>

如何实现输入的下划线效果-CSS

2 个答案: