How To Add ':' Character Near My Label With Many Space Character

Question

I want to create form like as below:

abc         :
abcdefg     :

'abc' has 3 character. 'abc :' is 20 character. So space should have 17 character. 'abcdefg' has 7 character. 'abcdefg :' is 20 character. So space should have 13 character. I don't want to add space with &nbsp character.

 <label class="col-sm-3 col-form-label col-form-label-lg">abc<span style="padding-left:17px;">:</span></label>

<label class="col-sm-3 col-form-label col-form-label-lg">abcdefg<span style="padding-left:13px;">:</span></label>

Above code is not true because 'px' is not equal to one character space.

I don't want to write code like as below:

 <label class="col-sm-3 col-form-label col-form-label-lg">abc &nbsp &nbsp &nbsp...:</label>

How can i add more than one character space with padding style ? For example can i write js function to add more than one space character with $nbsp ? Like as below:

function AddMultiCharacterSpace(charCount){ ... }

Answer 1

If you can give your label a width you can try using a pseudo-element:

label {
  position: relative;
  display: block;
  width: 100px;
}
label::after {
  content: ':';
  position: absolute;
  top: 0;
  right: 0;
}

<label>abc</label>

<label>abcdefg</label>

CODEPEN