CSS：修改list-item元素圆点与文本的间距

问题现象

给div元素加display: list-item样式，就可以展示跟li标签一样的圆点，如下图所示：

<div class="item-label">
   <span class="label-text">Test:</span>
   This is a sample.
 </div>

.item-label {
  background: linear-gradient(
    to right,
    rgba(10, 167, 150, 0.15),
    transparent
  );
  &::marker {
    color: @main-color;
  }

  display: list-item;
  list-style: disc inside none;

  font-family: PingFang;
  font-weight: 500;
  font-size: 12px;
  line-height: 28px;

  .label-text {
    color: #5f6163;
  }
}

效果如下：

修改marker元素的样式可以更改圆点的颜色等样式，**但是不能修改圆点与文本的间距。**同时发现，明明是marker元素产生的距离间隔，但是给marker加margin样式是不起作用的。

查看computed，发现一个叫margin-inline-end的灰色样式，不可查看来源也不可更改：

解决方法

虽然找到了问题原因，但是试了很多种方法都没办法修改margin-inline-end。于是只能另觅他法。
在CSDN搜索了一下，可以在元素上加text-indent以达到目的，于是浅浅尝试了一下：

添加text-indent以调整圆点与文本位置

.item-label {
  background: linear-gradient(
    to right,
    rgba(10, 167, 150, 0.15),
    transparent
  );
  &::marker {
    color: @main-color;
  }

  display: list-item;
  list-style: disc outside none; // 需配合调整list-style-positon为outside
  text-indent: -8px;// 将text-indent设为负值
  margin-left: 20px;// 需配合调整margin-left

  font-family: PingFang;
  font-weight: 500;
  font-size: 12px;
  line-height: 28px;

  .label-text {
    color: #5f6163;
  }
}

此操作之后调整为以下样式：

使用伪类元素调整背景颜色

虽然圆点与文本的距离调整完成了，但是文本的背景色产生了错位。不如干脆将背景色放在伪类元素上，到时再调整伪类元素的样式。
样式进一步调整成这样：

.item-label {
  &::marker {
    color: @main-color;
  }
  &::before {	// 添加含背景色的伪类元素
    content: '';
    background: linear-gradient(
      to right,
      rgba(10, 167, 150, 0.15),
      transparent
    );
    width: 100%;
    height: 100%;
    position: absolute;
    left: -20px;
  }

  display: list-item;
  list-style: disc outside none;
  text-indent: -8px;
  margin-left: 20px;

  font-family: PingFang;
  font-weight: 500;
  font-size: 12px;
  line-height: 28px;
  position: relative;// 配合伪类元素的absolute样式调整为relative样式

  .label-text {
    color: #5f6163;
  }
}

调整之后的样式如下：

至此圆满达成目的。