<div class="otp-input-wrapper">
  <input type="text" maxlength="4" pattern="[0-9]*" autocomplete="off">
  <svg viewBox="0 0 240 1" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="0" x2="240" y2="0" stroke="#3e3e3e" stroke-width="2" stroke-dasharray="44,22" />
  </svg>
</div>
.otp-input-wrapper {
  width: 240px;
  text-align: left;
  display: inline-block;
}
.otp-input-wrapper input {
  padding: 0;
  width: 264px;
  font-size: 32px;
  font-weight: 600;
  color: #3e3e3e;
  background-color: transparent;
  border: 0;
  margin-left: 12px;
  letter-spacing: 48px;
  font-family: sans-serif !important;
}
.otp-input-wrapper input:focus {
  box-shadow: none;
  outline: none;
}
.otp-input-wrapper svg {
  position: relative;
  display: block;
  width: 240px;
  height: 2px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.