如何为数字输入添加文本后缀以进行视觉区分？

将文本后缀附加到数字输入

在典型场景中，数字输入如 <code class=" css>/* Prepare wrapper element */ div { display: inline-block; position: relative; } /* Position the unit to the right */ div::after { position: absolute; top: 2px; right: .5em; transition: all .05s ease-in-out; } /* Adjust unit position on hover and focus */ div:hover::after, div:focus-within::after { right: 1.5em; } /* Override for Firefox (arrows always shown) */ @supports (-moz-appearance:none) { div::after { right: 1.5em; } } /* Specify abbreviation for each unit class */ .ms::after { content: 'ms'; } .db::after { content: 'db'; } .percent::after { content: '%'; }</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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>