かわいいリストアイコン

• ももいろ

• オレンジ

• みどり

• みずいろ

こんなかんじのリストの色をカラフル可愛くするcss。

———————————–

●css●
ul li:before{
content:"●";
float: left;
margin-top: -1px;
padding-right: 1%;←このへんは位置の調節に使う
}
ul li.icon01{
color:#F56779;
}
ul li.icon02{
color:#FFAB09;
}
ul li.icon03{
color:#9FD55F;
}
ul li.icon04{
color:#4DB3E3;
}
ul p{
font-size: 16px;
color:#333;
}

———————————–

これで、実際は上から順に文字と同じ色の丸いアイコンがつく。
文字まで染まってしまうので、Pタグでリストのテキストをくくって
色をかえておく。
ただのリストもこうすることでちょっとかわいくみえる。