如何创建带小下划线文本的可填充下划线文本

<input type="text" id="myInput" class="underline-input" placeholder="输入文本">

.underline-input {
  border: none;
  border-bottom: 1px solid #000;
  outline: none;
}

.underline-input::placeholder {
  text-decoration: underline;
}

const input = document.getElementById('myInput');

input.addEventListener('input', function() {
  const inputValue = input.value;
  const placeholder = input.placeholder;
  
  const underlineText = inputValue.replace(/_/g, '<span class="underline"></span>');
  const underlinePlaceholder = placeholder.replace(/_/g, '<span class="underline"></span>');
  
  input.value = underlineText;
  input.placeholder = underlinePlaceholder;
});

.underline {
  border-bottom: 1px solid #000;
  display: inline-block;
  margin: 0 1px;
  width: 2px;
}