CSSのリストでマーカーをひし形にする

2025.03.25 09:00
2025.03.24 10:37
CSSのリストでマーカーをひし形にする

今さらですが、CSSのリストマーカーをひし形にする方法をメモしてみました。

まずはデモを。

折り返しにも対応しています。
実際のコードはこんな感じです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    .list {
        background-color: #efefef;
        margin: 0;
        padding: 5px;
        width: 200px;
    }
    .list > li {
        position: relative;
        margin-bottom: 10px;
        padding: 0px 0px 0px 1em;
        list-style: none;
    }
    .list > li::before {
        position: absolute;
        top: .8em;
        left: 0px;
        transform: translateY(-50%) rotate(45deg);
        width: .6em;
        height: .6em;
        background-color: #000;
        content: "";
    }
  </style>
  <title></title>  
</head>
<body>
  <ul class="list">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4〜長い文章を書いた場合はどうなるの？</li>
    <li>リスト5〜長い文章を書いた場合はどうなるの？</li>
  </ul>
</body>
</html>

疑似要素をつくり、そこに四角をつくって回転させています。
これの他にも画像を入れたりフォントアイコンを使ったりできるみたいですが、
今回は触れません。

今回は以上です！