:afterの点線の前に余白を入れたい

:afterの点線の前に余白を入れたいです。

dtやddにpaddingを入れてみたりしたのですが、文字と点線の間に空白を入れることができません。

ググってみたのですが、文字と点線の間に空白を入れる方法が見つからず困っています。。。

もし詳しい方がいれば、教えていただけると助かります。

html
1<dl>
2<dt class="price__about-text2">遺産分割協議書の作成</dt>
3<dd>10,000円</dd>
4</dl>
5
6<dl>
7<dt class="price__about-text2">登記原因証明情報作成</dt>
8<dd>10,000円</dd>
9</dl>
10
11<dl>
12<dt class="price__about-text2">住宅用家屋証明書の取得</dt>
13<dd>10,000円</dd>
14</dl>
15
16<dl>
17<dt class="price__about-text2">代金決済立会業務</dt>
18<dd>10,000円</dd>
19</dl>

css
1dl {
2  display: flex;
3  justify-content: space-between;
4}
5
6dt {
7  width: 600px;
8}
9
10.price__about-text2 {
11  position: relative;
12  font-size: 20px;
13  letter-spacing: 0.1em;
14  font-weight: bold;
15  color: #333333;
16}
17
18.price__about-text2:after {
19  content: '';
20  position: absolute;
21  top: 50%;
22  width: 345px;
23  height: 2px;
24  border-bottom: 2px dotted #333333;
25
26}

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

回答2件

ベストアンサー

dt と dd の間に点線を挿入して、それぞれのあいだに余白を設定したいということだ推測しました。

position: absolute; での絶対配置はいろいろ難しいです。
FlexBoxを使っているので、点線もFlexBoxで横並びにすればシンプルに実現できると思います。

css
1dl {
2  display: flex;
3  justify-content: space-between;
4  align-items: center; /* 上下中央配置 */
5  gap: 20px;           /* 要素間の余白 */
6}
7
8.price__about-text2 {
9  font-size: 20px;
10  letter-spacing: 0.1em;
11  font-weight: bold;
12  color: #333333;
13}
14
15/* 点線はdlの疑似要素(子要素) */
16dl:after {
17  content: '';
18  flex-grow: 1; /* 余白に合わせて拡張 */
19  border-bottom: 2px dotted #333333;
20}
21
22dd {
23  order: 3;       /* 順番を点線と入れ替え */
24  margin-left: 0; /* ブラウザ既定の余白をリセット */
25}