<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-typeプロパティの使い方</title>
        <style>
            ul {
                list-style-type: square; /* 塗りつぶしの四角形マーカー */
            }

            ol {
                list-style-type: lower-roman; /* 小文字のローマ数字マーカー */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
        <ol>
            <li>olのli</li>
            <li>olのli</li>
            <li>olのli</li>
            <li>olのli</li>
        </ol>
    </body>
</html>
list-style-typeプロパティが適用された状態
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image プロパティを使う</title>
        <style>
            ul {
                list-style-image: url("heart.png"); /* 画像のマーカーを指定 */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
    </body>
</html>
list-style-imageプロパティが適用された状態
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image プロパティの使用例</title>
        <style>
            li::marker {
              content: "- "; /* マーカーの内容 */
              color: red; /* マーカーの色 */
              font-size: 1em; /* マーカーのサイズ */
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
    </body>
</html>
::marker疑似要素が適用された状態

caniuse.comで詳しい情報をご確認ください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-image プロパティの使用例</title>
        <style>
            li {
                list-style-type: none; /* ::before疑似要素でマーカーを代用する場合、既存のマーカーを消します。 */
            }
            li::before {
                content: "→"; /* カスタムマーカーの内容 */
                margin-right: 8px; /* マーカーとテキストの間隔 */
                display: inline-block;
                animation: before-bounce 1s infinite alternate; /* アニメーションの適用 */
            }
            @keyframes before-bounce {
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-10px);
                }
            }
        </style>
    </head>
    <body>
        <ul>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
            <li>ulのli</li>
        </ul>
    </body>
</html>
::before疑似要素が適用された状態