Как добавить символ «:» Near My Label с большим количеством космических символов

Question

Я хочу, чтобы создать форму, как, как показано ниже:

abc   : 
abcdefg  : 

«ABC» имеет 3 символа. «abc:» - 20 символов. Поэтому пространство должно иметь 17 символов. 'abcdefg' имеет 7 символов. 'abcdefg:' - 20 символов. Таким образом, пространство должно иметь 13 символов. Я не хочу добавлять пробел с символом nbsp &.

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

Выше кода не верно, потому что 'px' не равно одному пространству символов.

Я не хочу писать код, вроде как ниже:

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

Как я могу добавить более чем на один символ со стилем заполнения? Например, можно ли написать функцию js для добавления более одного символа пробела с помощью $ nbsp? Как, как показано ниже:

function AddMultiCharacterSpace(charCount){ ... } 

Answer 1

Если вы можете дать вашей этикетки шириной вы можете попробовать использовать псевдо-элемент:

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

<label>abc</label> 
 

 
<label>abcdefg</label>

CODEPEN

Answer 2

label { 
 
\t width: 100px; 
 
\t display: flex; 
 
\t justify-content: space-between; 
 
}

<label class="col-sm-3 col-form-label col-form-label-lg"> 
 
\t <span>abc</span> 
 
\t <span>:</span> 
 
</label> 
 
<label class="col-sm-3 col-form-label col-form-label-lg"> 
 
\t <span>abcdefg</span> 
 
\t <span>:</span> 
 
</label>

p.s. просто выберите желаемую ширину для метки.

Answer 3

Вы могли бы сделать это.

Для вашего label элемент display: inline-block (например, block также может быть опцией).

Вам также необходимо указать значение ширины.

Для размещения символа :, вы можете использовать псевдоэлемент и поплавать его справа.

label { 
 
    width: 100px; 
 
    display: inline-block; 
 
} 
 
label:after { 
 
    content: ':'; 
 
    float: right; 
 
}

<label>abc</label><br> 
 
<label>abcdfgh</label>