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.

The above is the detailed content of How to Add a Text Suffix to an Field Using CSS?. For more information, please follow other related articles on the PHP Chinese website!