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

Question

要事第一!

成分:我们有一个<input type="text"/> .

问题:每次用户键入、删除或更改字母时，文本区域下方必须长出一行，如可视化演示所示。我想象了不同的解决方案:

• 动态大小:行中添加/删除/更改前一行的部分具有添加/删除/更改的字母的确切宽度。
• static size:在前面的行中添加/删除/更改的部分不计算添加/删除/更改的字母的确切宽度。

问题:如何使用 HTML5 + CSS3 实现这些目标之一(最好不使用 javascript/jQuery)以便下划线会增长(从左到右)当用户更改输入中的文本时？ 我要动画。

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

[编辑]:请注意，视觉演示中的占位符不是随机的:输入标签包含所有内容，因此如果用户键入内容，则下划线存在并显示我要求的动画，否则显示没有任何下划线的占位符。我要问的是动画/过渡!输入标签的下划线在用户看来像是在增加/减少。

Answer 1

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

输入{文本装饰:下划线；

用它来实现你的要求