list-style-imageを使ってリストのマークを画像に変更

CSS

list-style-imageを使ってリストのマークを画像に変更する方法を紹介します。

html

<ul>
    <li><a href="#">日常</a></li>
    <li><a href="#">買い物</a></li>
    <li><a href="#">ダイエット</a></li>
    <li><a href="#">コスメ</a></li>
</ul>

css

ul {
  list-style-image: url(./images/arrow.png);
}

li a {
  text-decoration: none;
  color: #000000;
  line-height: 2em;
}

※ list-style-imageを使わないでリストマークを画像に変更する方法はコチラ