リストだったり、文章のはじめなどにアイコンをつけるのに便利
1 2 3 4 5 6 |
<ul class="testlist"> <li class="list-1">テキストテキスト</li> <li class="list-2">テキストテキスト</li> <li class="list-3">テキストテキスト</li> <li class="list-4">テキストテキスト</li> <ul> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
ul.testlist li{ list-style:none; position:relative; padding:0 0 0 25px; } ul.testlist li:before{ content:""; width: 20px; height: 20px; position:absolute; top: 50%; left: 0; margin-top: -10px; display: inline-block; background-image: url(http://ko-om.com/wp-content/uploads/2018/11/icon.png); background-repeat: no-repeat; background-position: center; background-size: 100% auto; } ul.testlist li:after{ display:inline-block; color:#ccc; } ul.testlist li.list-1:after{ content:">>"; } ul.testlist li.list-2:after{ content:"→"; } ul.testlist li.list-3:after{ content:"・・・"; } ul.testlist li.list-4:after{ content:"♪"; } |
- テキストテキスト
- テキストテキスト
- テキストテキスト
- テキストテキスト
使い方はアイデアしだいで色々できる!