CSS を使用して数値入力フィールドに単位接尾辞を追加する方法

<code class="css">/* Wrapper element */
div {
  display: inline-block;
  position: relative;
}

/* Unit positioning */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* Hover/focus adjustments */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

/* Firefox handling */
@supports (-moz-appearance:none) {
  div::after {
    right: 1.5em;
  }
}

/* Unit abbreviations */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}</code>

<code class="html"><div class="ms">
  <input type="number" id="milliseconds" />
</div>

<hr />

<div class="db">
  <input type="number" id="decibel" />
</div>

<hr />

<div class="percent">
  <input type="number" id="percentages" />
</div></code>