CSS でリーダー

こういう感じの項目の間を点線なんかで結ぶやつ。

トマト缶 0.5缶

パスタ 200g

HTML と CSS

こんな感じになってる。

<div class="line">
    <span class="name">トマト缶</span>
    <span class="amount">0.5缶</span>
</div>
<div class="line">
    <span class="name">パスタ</span>
    <span class="amount">200g</span>
</div>

<style>
.line {
    position: relative;             /* 子要素の幅の基準とする */
    height: 1.5em;                  /* 高さを確保する */
}
.line::before {
    content: "";
    display: block;
    width: 100%;                    /* .line と同じ幅 */
    position: absolute;             /* 行の要素に重ねる */
    margin-top: 0.5em;              /* 高さの半分を上の margin にとる */
    border-top: 1px dashed silver;  /* リーダーの色、太さ、スタイルを指定 */
}
.line .name {
    position: absolute;             /* リーダーに重ねる */
    padding-right: 1ex;             /* リーダーと少し離すための隙間 */
    background-color: white;        /* 背景色を指定して、リーダーを隠す */
}
.line .amount {
    right: 0;                       /* .line の右に寄せる */
    position: absolute;             /* リーダーに重ねる */            
    padding-left: 1ex;              /* リーダーと少し離すための隙間 */
    background-color: white;        /* 背景色を指定して、リーダーを隠す */
}
</style>

不親切な説明

行を表す要素に、リーダーを表す ::before 要素 、左の要素、右の要素を、position: absolute; を指定して重ねる。
行を表す要素の子要素は、全て absolute だから高さゼロになっちゃうので、height や display: list-item; で高さを確保する。
行を表す要素は、右側に寄せる要素の基準にしたいので、position: relative; で基準に指定する。

リーダーの線は border で表現。top か bottom の border を指定して、半分の高さに margin を設定する。

リーダーと、前後の要素に隙間が無いと見栄えが悪いので、それぞれ padding-right と padding-left を指定する。
透けちゃうとリーダーが見えちゃうので、背景色と同じものを指定する。