radial-gradientを使用して作成した点線の間隔を狭くしたい

前提・実現したいこと

タイトル・・・・・・・・・・・・・１００円
タイトル２・・・・・・・・・・・・２００円
のようなメニュー表を作成する際に、
こちらのフォーラムを参考にしてradial-gradientを使用して点線を作成したのですが
この点線の間隔を少し狭くしたいです。

現在は・　・　・　・　・のような広い間隔で、これを・・・・・・・・と細かくするにはどうコードを書けば良いのでしょうか？
よろしくお願いします。

該当のソースコード

HTML
1<div class="container">
2
3
4    <dl class="materialBox">
5        <div class="ingredients">
6            <dt class="ingredientName">タイトル１</dt>
7            <dd class="ingredientPrice">１００円</dd>
8        </div>
9        <div class="ingredients">
10            <dt class="ingredientName">タイトル２</dt>
11            <dd class="ingredientPrice">２００円</dd>
12        </div>
13    </dl>
14</div>
15```CSS
16
17  .container {
18   padding: 10px;
19   width: 80%;
20
21        }
22      }
23
24
25.ingredients {
26    display: flex;
27    align-items: center;
28    padding: 1.5rem;
29        }
30
31.ingredients::after {
32     height: 15px;
33     content: '';
34     background: radial-gradient(#000 10%, transparent 0) center/ 15px 15px;
35     flex: 1 1 auto;
36     order: 1;
37        }
38
39.ingredientPrice {
40     order: 2;
41        }
42
43.ingredientName{
44    font-size: 1.5rem;
45}
46
47
48
49### 試したこと
50
51radial-gradientの使い方を調べ、数値をいじったりしてみましたが勉強が足りずどうすれば良いかわかりません。

行動規範の内容に同意します

回答1件

ベストアンサー

backgroundは複数の背景を適用できるので、それを利用してbackground-sizeとbackground-positionも一緒に使うとドットの間隔を調整できます。

CSS での複数の背景の利用方法 - CSS カスケーディングスタイルシート：MDN

css
1.ingredients::after {
2  height: 15px;
3  content: "";
4  background-image: radial-gradient(#000 10%, transparent 0), radial-gradient(#000 10%, transparent 0);
5  background-position: 0 0, 7px 0;
6  background-size: 14px 14px;
7  // 元のスタイル
8  // background: radial-gradient(#000 10%, transparent 0) center/ 15px 15px;
9  flex: 1 1 auto;
10  order: 1;
11}