【html】メニュー表のように文字と文字の間に点線を入れる方法

カフェやレストランのメニュー等でよく見かける、メニュー名と値段の間に点線を入れる方法をご紹介します！

htmlでリストを作成

まずは、htmlでリストを作成します。
今回は以下のようにhtmlを作成します。

<dl class="menu-list">
  <div class="is-flex">
    <dt class="menu-list_name">メニュー名</dt>
    <dd class="menu-list_price">¥〇〇〇</dd>
  </div>
</dl>

CSSでリストをスタイリング

次にCSSでリストのスタイリングを行います。
こんかいは以下のように設定します。

.menu-list{
  width: 100%;
}
.is-flex{
  position: relative;
  display: flex;
  justify-content: space-between;
}
.is-flex:after{
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  display: block;
  border-bottom: dotted 1px #ccc;
  z-index: 1;
_}
.menu-list_name{
  background: #fff;
  padding: 0 0 0 5px;
  z-index: 2;
}
.menu-list_price{
  background: #fff;
  padding: 0 5px 0 0;
  z-index: 2;
}

まとめ

メニュー等の点線をCSSで設定する方法についてご紹介いたしましたが、いかがだったでしょうか？

WEBサイトでメニューを表示する場合にも使えるので、ご興味のある方は是非一度お試し下さい！