如何逐个字母突出显示单词的底部？

Question

首先要做的事情！

成分：我们有<input type="text"/>。

问题：每次用户输入，删除或更改字母时，文本区域下方都必须生成一行，如可视演示中所示。我想象了不同的解决方案：

• 动态大小：添加/删除/更改前一行的部分具有添加/删除/更改的字母的确切宽度。
• 静态大小：添加/删除/更改先前行的行的部分不计算添加/删除/更改的字母的确切宽度。

问题：如何使用HTML5 + CSS3实现其中一个目标（首选而不使用javascript / jQuery），因此下划线将会增长（从左到右）而用户更改输入内的文本？ 我要求动画。

实际视觉演示：从第一步到最后一步，用户正在输入，然后他完成了，最后，他删除了所有内容。

[编辑]：请注意，可视演示中的占位符字不是随机的：输入标记包含所有内容，因此如果用户输入内容，则下划线存在并显示我要求的动画，否则显示没有任何下划线的占位符。我要问的是动画/过渡！输入标记的下划线对用户来说似乎是在增长/减少。

Answer 1

只需使用输入字段的css text-decoration属性

输入{text-decoration：underline; }

使用它来达到您的要求

Answer 2

不确定我是否理解你想要的东西。但它似乎有点简单。只需使用此

input {
	text-decoration:underline
}

<input type="text" placeholder="insert text">

编辑：抱歉重复的答案。 Stackoverflow进行维护 模式，而我正在回答，答案现在出现

Answer 3

这可以通过使用伪元素，宽度的一些CSS技巧和锚的:hover设置来控制伪元素。

＆＃13;

＆＃13;

.link  {
  text-decoration: none;
  position: relative;
  color: tomato;
}

.link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  border-bottom: 2px solid #3366FF;
  transition: 0.4s;
}

.link:hover {
  color: blue;
}

.link:hover::after {
  width: 100%;
}

＆＃13;

<a class="link" href='#'>This link here</a>

＆＃13;

＆＃13;

＆＃13;