◆ Firefox では動いた
◆ before でやるのがよさそう 

li の頭につける記号を深く考えずに before で作ってたのですが before だと
◆あいうえおかきく
けこさしすせそ

のように「け」の部分が ◆ と並びます

CSS で全体を右に一文字分ずらして text-indent で最初の行だけ一文字分左から始めて 「◆」 だけ左にだすという方法があります
li {
    margin-left: 1em;
    text-indent: -1em;
}
li:before {
    content: "◆";
}

これだけではあるのですが 毎回書くのはちょっと面倒です
それに 1em は一文字分といっても等幅フォントでないと ずれた分と「◆」の大きさが違います


li はデフォルトで 「●」 がありますし CSS の設定で好きな文字できたようなー…… と思って調べてみたらありました
文字列を指定できるようです

https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type
list-style-type: '-';

早速やってみると

動かない!!


色々いじってみてもダメで サンプルが間違ってるのかもと Firefox で試してみると普通に動きました
CSS のすごく基本的な部分におもえるのに Chrome で実装されていないのは意外です

IE11 でも未対応で主流なブラウザでは Firefox だけの対応のようです