这只能通过JavaScript来实现。
为了让标签显示在进度条的前面，你需要将标签的位置设置为absolute。
然后，用JS获取bar、label及其容器，并获取它们的宽度以备后用。
接下来，将width设置为bar，为它添加标签宽度，并检查它是否太大而无法容纳容器，如果不是，通过计算间隙将其从右侧移动，否则，这意味着它无法容纳，因此将其移动到右侧，然后它将显示在bar前面。
这是关键代码：

if ((bar + label) < container) {

  labelEl.style.setProperty('right', `${container-(bar+label)}px`);

} else {

  labelEl.style.right = `0`;
}

此外，您需要手动设置标签的动画，因此添加bar的动画：

style="transition:right .6s ease;"

这里有一个演示片段（它是错误和黑客，但它应该给予一个关于如何做到这一点的一般想法，这将在很大程度上取决于你如何设置宽度）：

addEventListener("DOMContentLoaded", (event) => {

    let iteration = 1;

    const interval = setInterval(function() {

      const barEl = document.querySelector('.progress-bar');

      barEl.style.setProperty('width', iteration * 5 + '%');

      const labelEl = document.querySelector('.progress-label');

      const container = parseFloat(getComputedStyle(document.querySelector('.progress')).width);

      let bar = parseFloat(getComputedStyle(barEl).width);

      const labelData = getComputedStyle(labelEl);
      
      // calc margins
      const labelMargins = parseFloat(labelData.marginLeft) + parseFloat(labelData.marginRight);

      const label = parseFloat(labelData.width) + labelMargins * 2;

      // check spacing, move label accordingly
      // else, fix to right
      if ((bar + label) < container) {

        labelEl.style.setProperty('right', `${container-(bar+label)}px`);

      } else {

        labelEl.style.right = `0`;
      }

      labelEl.textContent = iteration * 5 + '%';

      if (++iteration > 20) {
        clearInterval(interval);
      }

    }, 300);

})

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col"></th>
      <th scope="col"></th>
      <th scope="col"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td></td>
      <td></td>
<td class="occurrence fw-normal text-light small pe-4">
<div class="progress  position-relative">
    <div class="progress-bar occurrence"
         role="progressbar"
         aria-valuemin="0"
         aria-valuemax="100"
         aria-valuenow="100"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
         title=""
 
         data-bs-original-title="Appears in 10 comments"
         aria-label="Appears in 10 comments">
    </div>
    <span class="occurrence percentage mx-2 fw-bold progress-label position-absolute" style="transition:right .6s ease;"></span>
  </div>
</td>
    </tr>

  </tbody>
</table>