HTMLのリスト要素（li）の行頭記号をCSSで変更する話

HTMLでリストを書く場合、「ol」か「ul」を使い、個別項目は「li」で列挙します。
順序リストか箇条書きかの違いです。

リストの冒頭に設定される数字や記号（マーク）は、HTML解釈による自動設定です。
これは、CSSで調整が可能なのです。ただし、あらかじめ決められているものは味気ないので、自分の好きな文字をリストのマークにしてしまいたいという話です。

リストマークをCSSで設定

かなり以前も同じことを書いているのですが、上手く探せない上にちょっと分かりにくかったので、あらためてソースとともに書いておこうと思います。
ブログを書き始めて間もないころの投稿でした。せめて備忘録として使える程度にはしておきたかったものです。。ｗ

やりたいこと

リストのマークを自分の好みの文字にしたいという話です。

番号なしリストのマークとして利用できるのは、黒丸（disc）、白丸（circle）、四角（square）のみです。これだけでは味気ないと思うのです。

細かいことに凝ってしまう性格のようでしてｗ

この投稿のソースに書いたものです。
リストの行頭マークを「> 」に変更します。

クラス名を指定することで、縛れるようにしました。
他のところに変な影響を出したくないからです。

リストのマークを無効化して、疑似要素であらかじめマークに代わるものを書き込んでおきます。

.gt-list li {
    list-style: none;
}
.gt-list li:before {
    content: '> ';
}

クラス名を指定しておきます。

<ul class="gt-list">
    <li>7.0 Nougat</li>
    <li>8.0 Oreo</li>
    <li>9.0 Pie</li>
    <li>10.0 ???</li>
</ul>

上に書いたソースを表示すると、以下のようになります。

リストマークが指定どおりになっていますね。

今回はマークを入れていますが、画像の指定も可能です。
また、after疑似要素を利用すれば、末尾にも文字などを付け加えられます。