[CSS] マーカー（アイコン）を画像にしたリスト

公開日:2024/11/01

サンプルコード

html

<div class="list_icon">
    <ul>
        <li>サンプルテキスト</li>
        <li>サンプルテキスト</li>
        <li>サンプルテキスト</li>
    </ul>
</div>

CSS

.list_icon ul {
    list-style: none;
}

.list_icon li {
    position: relative;
    padding: 0px 0px 0px 2em;
}
.list_icon li::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    background-image: url(icon_xxx.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    content: "";
}

.list_icon li + li {
    margin-top: 1em;
}

デフォルトのマーカーを非表示にし、paddingで余白を設けたエリアにbefore疑似要素で背景画像を設定しています。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。