Add a Text Suffix to <Input Type="Number">

Add a text suffix to input type=number

You can use a wrapper <div> for each input element and position the unit as a pseudo element ::after with the content of your corresponding units.

This approach works well for the absolute positioned pseudo elements will not effect the existing layouts. Nevertheless, the downside of this approach is, that you have to make sure, that the user input is not as long as the text field, otherwise the unit will be unpleasantly shown above. For a fixed user input length, it should work fine.

/* prepare wrapper element */
div {
  display: inline-block;
  position: relative;
}

/* position the unit to the right of the wrapper */
div::after {
  position: absolute;
  top: 2px;
  right: .5em;
  transition: all .05s ease-in-out;
}

/* move unit more to the left on hover or focus within
   for arrow buttons will appear to the right of number inputs */
div:hover::after,
div:focus-within::after {
  right: 1.5em;
}

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

/* set the unit abbreviation for each unit class */
.ms::after {
  content: 'ms';
}
.db::after {
  content: 'db';
}
.percent::after {
  content: '%';
}

<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>

Add a prefix/suffix to value of input tag

Using ng-model="data" in <input type="text"> binds the data with entire text field. This is not particularly useful in situations where you want only a portion of text(being displayed in text field) to get bind with the scope.

For instance, if you do

<input type="text" value="prefixText {{name}} suffixText" ng-model="name">

The input box will display whatever is in name(with no prefix/suffix text)

However, there's a workaround. Use ng-bind on the variable and mention prefix/suffix text separately in the value="..." attribute.

<input type="text" value="prefixText {{name}} suffixText" ng-bind="name">

Here's the demo

How to add a text to the end of input and How to remove default up and down for input type number?

You have to wrap the input and the text (KG) with a container. these container assign a position: relative;. The tag which holds the text KG assign position: absolute.

To hide the arrows in your input field you can use the css property: -moz-appearance: textfield;

input[type=number] {
  -moz-appearance: textfield;  
  -webkit-appearance: textfield;  
  appearance: textfield;  
}

working example

.field {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: white;
      font-size: 1.1rem;
      text-transform: uppercase;
      background-color: rgba(36, 141, 127, 0.4);
   
    }
.wrapper {
  position:relative;
}
span {
   position:absolute;
   top:10px;   
   right: 10px;
}
    input {
      background-color: rgba(14, 78, 72, 0.6);
      border: 1px solid rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      padding: 9px;
      outline: none;
      color: wheat;
      font-size: 1.1rem;
      position: relative;
    }

    .kg::after {
      content: "| KG";
      position: absolute;
      right: 3px;
      top: 2px;
    }

input[type=number] {
  -moz-appearance: textfield;  
}

<html>
  <body>
    <div class="field">      
      <label for="gesier"> gesier</label>
      <div class="wrapper">
      <input type="number" id="gesier" class="kg" />
      <span>kg</span>
      </div>
    </div>
  </body>
  <style></style>
</html>

HTML Text before and after (Prefix/Suffix) Input field

using flex seems to work just fine for me. Might be worth a try.

   <div style="display:flex;">
       <div>Test </div>
       <input type="text">
       <div> Dollars</div>
    </div>

Set input-suffix for certain input fields with CSS

Pseudo classes like after and before cannot work on input elements. Why so?
Because they work only on elements which can contain html markup. An input tag doesn't.

Robert Koritnik explained this quite good in this question.

There're other questions like that and like this:

CSS :after input does not seem to work
Add CSS content image after input

Font Awesome icon inside text input element

You're right. :before and :after pseudo content is not intended to work on replaced content like img and input elements. Adding a wrapping element and declare a font-family is one of the possibilities, as is using a background image. Or maybe a html5 placeholder text fits your needs:

<input name="username" placeholder="">

Browsers that don’t support the placeholder attribute will simply ignore it.

UPDATE

The before content selector selects the input: input[type="text"]:before. You should select the wrapper: .wrapper:before. See http://jsfiddle.net/allcaps/gA4rx/ .
I also added the placeholder suggestion where the wrapper is redundant.

.wrapper input[type="text"] {
        position: relative; 
    }
    
    input { font-family: 'FontAwesome'; } /* This is for the placeholder */
    
    .wrapper:before {
        font-family: 'FontAwesome';
        color:red;
        position: relative;
        left: -5px;
        content: "\f007";
    }

    
    <p class="wrapper"><input placeholder=" Username"></p>

Add a Text Suffix to <Input Type="Number">