How to Add a Text Suffix to an Field Using CSS?

Field Using CSS? " /> Field Using CSS? " />

Add a Text Suffix to

This question revolves around the need to append a text suffix to input fields of type "number" to indicate the units represented by the input value. While this cannot be achieved directly with CSS, there's a clever workaround using a wrapper element and the ::after pseudo-element.

Concept:

• Wrap each input field in a
  element.
• Use the ::after pseudo-element positioned absolutely within the
  to display the unit suffix.
• Position the unit suffix to the right of the input field using margin or padding.
• Change the content of the ::after pseudo-element to display the desired unit suffix, e.g., "ms" for milliseconds.

Implementation:

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

/* Unit suffix position */
div::after {
  position: absolute;
  right: 1em;  /* Adjust as needed */
}

/* Example unit suffixes */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'dB';
}
.percent::after {
  content: '%';
}</code>

<code class="html"><div class="ms">
  <input type="number" id="milliseconds">
</div>
<br>
<div class="db">
  <input type="number" id="decibel">
</div>
<br>
<div class="percent">
  <input type="number" id="percentages">
</div></code>

Benefits:

• Allows for clear and concise unit indication without modifying the input element itself.
• Simple and cross-browser compatible solution.

Limitations:

• Ensure that the input value does not exceed the width of the text field to prevent the unit suffix from overlapping.