- いろはにほへとちりぬるを
- わかよたれそつねならむ
- うゐのおくやまけふこえて
- いろはにほへとちりぬるを
- わかよたれそつねならむ
- うゐのおくやまけふこえて
- いろはにほへとちりぬるを
- わかよたれそつねならむ
- うゐのおくやまけふこえて
使い方
頭の記号の色は[var(--primary-dark)]を指定しています。
+-ul.lo-list-+に+-.num-+クラスを付けることで頭の記号に数字が入ります。
+-.ll-li-+に[data-ico]属性を入れることで、入力値のアイコンを表示します。
.ll-li {
display: flex;
align-items: center;
gap: 8px;
}
.ll-li::before {
content: '';
width: 12px;
min-width: 12px;
height: 12px;
border-radius: var(--radius-round);
background: var(--primary-dark);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.ll-li:not(:last-child) {margin: 0 0 8px;}
.ll-li[data-ico]::before {
content: attr(data-ico);
width: 20px;
min-width: 20px;
height: 20px;
font-family: 'Material Icons';
}
.num .ll-li {counter-increment: caution;}
.num .ll-li::before {
content: counter(caution);
width: 20px;
min-width: 20px;
height: 20px;
font-size: var(--typo-min);
}