List

記号やナンバリングのリスト

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • numbering
  • icon
  • いろはにほへとちりぬるを
  • わかよたれそつねならむ
  • うゐのおくやまけふこえて
  • いろはにほへとちりぬるを
  • わかよたれそつねならむ
  • うゐのおくやまけふこえて
  • いろはにほへとちりぬるを
  • わかよたれそつねならむ
  • うゐのおくやまけふこえて
  • HTML
  • CSS
    
    
  • 
  
.mod_list-li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mod_list-li::before {
  content: '';
  height: 12px;
  line-height: 20px;
  aspect-ratio: 1/1;
  border-radius: var(--radius-round);
  background: var(--primary-main);
  color: var(--white-main);
  display: flex;
  justify-content: center;
  align-items: center;
}
.mod_list-li:not(:last-child) {margin: 0 0 8px;}
.mod_list-li[data-ico]::before {
  content: attr(data-ico);
  height: 20px;
  font-family: 'Material Icons';
}
.mod_list.num .mod_list-li {counter-increment: num;}
.mod_list.num .mod_list-li::before {
  content: counter(num);
  height: 20px;
  font-size: var(--typo-min);
}

使い方

頭の記号の色は[var(--primary-dark)]を指定しています。

+-ul.mod_list-+に+-.num-+クラスを付けることで頭の記号に数字が入ります。

+-.mod_list-li-+に[data-ico]属性を入れることで、入力値のアイコンを表示します。

ナンバリングは{content: counter(num, decimal-leading-zero);}とすることで、01,02となる。