CSSだけで好きな大きさ・間隔のドットライン

backgroundのグラデーションを利用し、CSSだけでドットラインを引きます。
radial-gradientの数値とbackground-sizeを弄ることで好みの大きさ・間隔に調整可能です。

HTML(Pug)

.dot-line

CSS(SCSS)

.dot-line {
  &::before { 
    background: radial-gradient(circle farthest-side, gray, gray 30%, transparent 30%, transparent);
    background-size: 10px 10px;
    content: '';
    display: inline-block;
    height: 10px;
    width: 100%;
  }
}