LIST 1 : UL
li に直接 web icon を記述
- filter_vintage Lorem ipsum dolor sit amet
- spa Fuga reprehenderit
- flutter_dash Excepteur sint occaecat cupidatat
Excepteur sint occaecat cupidatat
- ソースはここをクリック
-
<head> <!-- Google Material Symbols --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> </head> <ul class="embellishedList-1"> <li><span class="material-symbols-outlined">filter_vintage</span> Lorem ipsum dolor sit amet</li> <li><span class="material-symbols-outlined">spa</span> Fuga reprehenderit </li> <li><span class="material-symbols-outlined">flutter_dash</span> Excepteur sint ・・・<br>Excepteur sint ・・・</li> </ul>
ul.embellishedList-1 li { list-style-type: none; padding: 1rem 0; display: flex; align-items: center; border-bottom: dotted 1px #999; } ul.embellishedList-1 li:last-child { border: none; } ul.embellishedList-1 span.material-symbols-outlined { width: 4rem; font-size: 35px; }
CLOSE