Пунктирная как древовидная структура

Question

У меня проблема с кросс-браузерной линией в стиле границы.Я создал одну или несколько точек с помощью border style dotted, но он отлично работает на Chrome.Но в Firefox это не сработает.Так что является лучшей идеей, чтобы это произошло во всех браузерах?

Я не могу изменить разметку, которую могу сделать только из css

Вот скрипка

И желаемый результат.

.span:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 0;
    height: 4px;
    border-top: 4px dotted #333;
    overflow: hidden;
}
.span {
    position: relative;
}

.level-1 {
    padding-left: 12px;
    
    &:before {
        width: 6px;
    }
}

.level-2 {
    padding-left: 18px;
    
    &:before {
        width: 12px;
    }
}

.level-3 {
    padding-left: 24px;
    
    &:before {
        width: 18px;
    }
}

.level-4 {
    padding-left: 30px;
    
    &:before {
        width: 24px;
    }
}

<div class="span level-1">Test</div>
<div class="span level-2">Test 2</div>
<div class="span level-3">Test 3</div>
<div class="span level-4">Test 4</div>

Answer 1

Вы можете попробовать radial-gradient в качестве повторяющегося фона:

.span {
  position: relative;
  background-image:
    linear-gradient(#fff,#fff),
    radial-gradient(circle at center,#000 30%,transparent 40%);
  background-size:100% 100%,6px 12px;
  background-position:0 3px;
  background-repeat:no-repeat,repeat;
}
.level-1 {
  padding-left: 12px;
  background-position:6px 0,0 3px;
}

.level-2 {
  padding-left: 18px;
  background-position:12px 0,0 3px;
}

.level-3 {
  padding-left: 24px;
  background-position:18px 0,0 3px;
}

.level-4 {
  padding-left: 30px;
  background-position:24px 0,0 3px;
}

<div class="span level-1">Test</div>
<div class="span level-2">Test 2</div>
<div class="span level-3">Test 3</div>
<div class="span level-4">Test 4</div>

Или используйте SVG в качестве фона:

.span {
  position: relative;
  background-image:
    linear-gradient(#fff,#fff),
    url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="35" fill="#000" /></svg>');
  background-size:100% 100%,7px 7px;
  background-position:0 10px;
  background-repeat:no-repeat,repeat-x;
}
.level-1 {
  padding-left: 12px;
  background-position:6px 0,0 6px;
}

.level-2 {
  padding-left: 18px;
  background-position:14px 0,0 6px;
}

.level-3 {
  padding-left: 24px;
  background-position:20px 0,0 6px;
}

.level-4 {
  padding-left: 30px;
  background-position:28px 0,0 6px;
}

<div class="span level-1">Test</div>
<div class="span level-2">Test 2</div>
<div class="span level-3">Test 3</div>
<div class="span level-4">Test 4</div>