2020年11月27日金曜日

項目間にリーダー線を付ける

目次や料理の価格表のように、二つの項目間にリーダー線を付ける(レスポンシブ対応)。

デモページを表示

CSS

補足
  • 16行目:リーダー線に使う文字列を長めに設定する。
  • レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足
  • ul 要素に add-leader クラスを付ける。
  • li 要素内の em 要素と span 要素の間に、指定した文字でリーダー線が表示される。