迷你购物车计数器位置修正：实现右侧固定与内容左对齐

我有一个迷你购物车，计数器用于显示购物车内的商品数量：

当商品数量较多（例如1000）时，计数器会向右偏移：

我希望计数器的右侧位置固定，内容从左侧开始排列，预期效果如下：

以下是当前使用的HTML代码及CSS样式，寻求调整方案：

现有HTML代码 #

<span class="elementor-button-icon-qty" data-counter="1">1</span>

现有CSS样式 #

.elementor-button-icon-qty[data-counter] {
    display: block;
    position: absolute;
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.5em;
    top: -.7em;
    inset-inline-end: -.7em;
    border-radius: 100%;
    color: var(--items-indicator-text-color,#fff);
    background-color: var(--items-indicator-background-color,#d9534f);
    text-align: center;
    font-size: 10px
}

调整后的CSS代码 #

.elementor-button-icon-qty[data-counter] {
    display: block;
    position: absolute;
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.5em;
    top: -.7em;
    inset-inline-end: -.7em; /* 固定右侧位置 */
    border-radius: 100%;
    color: var(--items-indicator-text-color,#fff);
    background-color: var(--items-indicator-background-color,#d9534f);
    text-align: left; /* 文本左对齐，内容从左侧开始排列 */
    padding-right: 0.3em; /* 避免文本贴住圆形右侧边缘 */
    box-sizing: border-box; /* 确保内边距不影响元素定位与宽度计算 */
    font-size: 10px;
}

调整说明 #

1. 将text-align: center改为text-align: left，让计数器内的数字从左侧开始排列，不再居中
2. 添加padding-right: 0.3em和box-sizing: border-box，保证数字不会紧贴圆形右侧边缘，同时内边距不会额外增加元素宽度
3. 保留inset-inline-end: -.7em维持计数器右侧的固定位置，无论数字长度增加多少，计数器右侧都不会偏移

内容的提问来源于stack exchange，提问作者rk9802710