テーブルなどで使える文字量に連動するドットライン

複数の情報を表示する表などを作る際、項目名の横にドットのラインを引きたいことがあります。
thに擬似クラスを用意して、backgroundのグラデーションを利用し項目名の横に可変ドットラインを表示します。

HTML(Pug)

table
  tbody
    tr
      th item name
      td detail
    tr
      th item name
      td detail
    tr
      th item name
      td detail

CSS(SCSS)

table {
  width: 70%;
  margin: 0 auto;
  th {
    display: flex;
    align-items: center;
    width: 100%;
    &::after {
      background: radial-gradient(circle farthest-side, gray, gray 30%, transparent 30%, transparent);
      background-size: 6px 6px;
      content: '';
      display: block;
      flex-grow: 1;
      height: 6px;
      margin: 0 1%;
    }
  }
  td {
    width: 4em;
  }
}