html - 如何在我的带有许多空格字符的标签附近添加 ':' 字符

Question

我想创建如下形式:

abc         :
abcdefg     :

'abc' 有 3 个字符。 'abc :' 是 20 个字符。所以空格应该有 17 个字符。'abcdefg' 有 7 个字符。 'abcdefg :' 是 20 个字符。所以空格应该有13个字符。我不想用   字符添加空格。

 <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