liタグはlist-style-mark: discが標準でついているというかデフォルトなんですが、フォントにより表示するサイズに差異が生じて文字がズレたり改行したりすることがあります。
その場合は、マークをnoneで消してbackgroundで画像を利用する方法もありますが、●以外で標準にはないlist-style-markのマークを設定したい場合やわざわざ画像にしなくてもCSSで済ませたいという場合はcontentを利用しても良いかと。
さらに、特殊記号を利用したい場合は特殊文字のコードを入力しますが、値はHTMLで入力しても普通の文字として処理されるので、変換する必要があります。
li {
list-style-mark: none; // マークの表示を消す
}
li:before {
content: "\025b6"; /* ▶ <- 10進数 (\025b6 <- 16進数) */
display: inline-block;
font-family: monospace;
font-size: 16px;
margin-left: -20px;
width: 20px;
margin-right: 5px;
}マークにする特殊記号に特定のフォントファミリーを指定してどの環境でも表示を一緒にします。
beforeでマークを表示した分、文字などはズレるので調整する場合はmargin-leftをマイナスで調整すると良い感じになります。