CSSの::markerでリストマーカーをカスタマイズするツール
リストのマーカー（行頭文字）をCSSの::marker擬似要素を使ってカスタマイズします。文字、色、サイズや簡単なアニメーションを設定できます。
プレビュー
<ul class="custom-marker-list">
<li>リストアイテム 1</li>
<li>リストアイテム 2</li>
<li>リストアイテム 3</li>
</ul>/* ::marker のカスタマイズ */
ul.custom-marker-list li::marker {
content: "{{marker_content}} ";
color: {{marker_color}};
font-size: {{marker_size}}px;
animation: {{marker_animation}} 1s infinite alternate;
}
/* 点滅アニメーション */
@keyframes marker-blink {
0% { opacity: 1; }
100% { opacity: 0.4; }
}
/* 色変化アニメーション */
@keyframes marker-color-cycle {
0% { color: {{marker_color}}; }
100% { color: #1E90FF; }
}機能・使い方
- CSSの
::marker擬似要素を使って、リストマーカー（行頭文字）をカスタマイズするツールです。 - マーカーの文字、色、サイズ、簡単なアニメーションを設定できます。
contentプロパティに記号や文字を入れることで、デフォルトの黒丸（disc）などを変更できます。- ※
::markerで利用できるプロパティは制限されています（color, content, fontプロパティなど）。transformやbackground、margin、paddingは基本的に効きません。マーカーとテキストの間隔を調整したい場合は、contentの値にスペースを含める（例:"★ "）などの工夫が必要です。
