css下划线上输入

在web开发中，有时我们需要通过下划线来给文字或者链接添加装饰效果。下面是一种使用CSS实现下划线在输入框上方跟随输入文字的实现方式。

 <form action="#">
  <label>输入框:<input id="underline-input" type="text"></label>
  <p id="underline-preview"></p>
  </form>

  <style>
  #underline-input {
    border: none;
    border-bottom: 1px solid #333;
    outline: none;
  }
  #underline-preview {
    border-bottom: 1px solid #333;
    width: fit-content;
    margin-top: -18px;
  }
  </style>

  <script>
  const input = document.getElementById("underline-input");
  const preview = document.getElementById("underline-preview");

  input.addEventListener("input", () => {
    preview.innerHTML = input.value;
  });
  </script> 

首先我们创建了一个带有输入框和预览框的表单，并给输入框一个下划线。然后我们使用CSS对预览框设置了宽度和下划线，并将其位置设置为输入框上方-18像素。接下来我们使用JavaScript监听input事件，更新预览框的内容。

通过这种方式，我们可以动态实现下划线跟随输入文字的效果，增加页面的交互性和美观度。