たとえば、リストアイテムの箇条書きとして、星印（★）を使用する必要があります。

私はCSS3モジュールを読みました。箇条書きとしてカスタムテキストを使用する方法を説明するListsですが、私にとっては機能しません。ブラウザは::marker疑似要素をサポートしていないだけだと思います。

画像を使わずにどうすればいいですか？

編集

もう画像の使用はお勧めしません。次のように、Unicode文字を使用するアプローチに固執します。

li:before {
  content: "\2605";
}

古い答え

私はおそらく画像の背景に行くでしょう、それらははるかに効率的な多目的でクロスブラウザに優しいです。

次に例を示します。

<style type="text/css">
  ul {list-style:none;} /* you should use a css reset too... ;) */
  ul li {background:url(images/icon_star.gif) no-repeat 0 5px;}
</style>

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

箇条書きとしてのテキストの使用

li:beforeエスケープされた16進HTMLエンティティ（または任意のプレーンテキスト）と共に使用します。

例

私の例では、箇条書きとしてチェックマークが付いたリストを作成します。

CSS：

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

ブラウザの互換性

私自身はテストしていませんが、IE8の時点でサポートされているはずです。少なくともそれはquirksmodeとcss-tricksが言うことです。

条件付きコメントを使用して、画像やスクリプトなどの古い/遅いソリューションを適用できます。さらに良いことに、両方を<noscript>画像に使用します。

HTML：

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

背景画像について

背景画像は確かに扱いやすいですが...

1. ブラウザのサポートbackground-sizeは、実際にはIE9のみです。
2. HTMLテキストの色と特別な（クレイジー）フォントは、HTTPリクエストが少なくても多くのことができます。
3. スクリプトソリューションは、HTMLエンティティを挿入するだけで、同じCSSに処理を任せることができます。
4. CSSコードを適切に再設定すると、list-style（より論理的な選択が）容易になります。

楽しい。

あなたはそれを構築することができます：

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}

これはW3Cソリューションです。3012でお使いいただけます！

ul { list-style-type: "*"; }
/* Sets the marker to a "star" character */

https://drafts.c​​sswg.org/css-lists/#text-markers

一部のデバイス（Retinaディスプレイを備えたAppleデバイス）またはズームインしたときにピクセル表示される可能性があるため、画像はお勧めできません。

これが私がこれまでに見つけた最良の解決策です。それは素晴らしい働きをし、それはクロスブラウザ（IE 8+）です。

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

重要なことは、文字が長すぎて1行に収まらない場合でもテキストが整列したままになるように、固定幅の浮動ブロックに文字を配置することです。 1.2emは、キャラクターに必要な幅です。必要に応じて変更してください。ul要素とli要素のパディングとマージンをリセットすることを忘れないでください。

編集：ulとli：beforeで異なるフォントを使用する場合、「1.2em」のサイズは異なる場合があることに注意してください。ピクセルを使用する方が安全です。

星を追加するには、Unicode文字を使用します22C6。

とli星の間に少し隙間を空けるためにスペースを追加しました。スペースのコードはA0です。

li:before {
    content: '\22C6\A0';
}

222の答えのより完全な例：

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

古いバージョンのIEでデフォルトのリストスタイルを復元するために、スターハックプロパティを含めました。これらを引き出して、必要に応じて条件付きインクルードに含めるか、背景画像ベースのソリューションで置き換えることができます。このように実装された特別な箇条書きのスタイルは、疑似セレクターをサポートしていないいくつかのブラウザーでは適切に低下するはずだと、私の控えめな意見です。

Firefox、Chrome、Safari、IE8-10でテストされ、すべて正しくレンダリングされます。

ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}

私はこのリスト全体を調べてきましたが、2020年現在、部分的に正しい要素と部分的に正しくない要素があります。

インデントとオフセットがUTF-8を使用するときに最大の問題であることがわかったので、これを2020互換のCSSソリューションとして、「直立三角形」の箇条書きを例にして投稿します。

ul {
    list-style: none;
    text-indent: -2em; // needs to be 1 + ( 2 x margin), and the result 'negative'
}

ul li:before {
    content: "\25B2";
    margin: 0 0.5em; // 0.5 x 2 = 1, + 1 offset to get the bullet back in the right spot
}

emフォントサイズとの競合を回避するための単位として使用

このコードを試してください...

li:before {
    content: "→ "; /* caractère UTF-8 */
}

このトピックは古い可能性がありますが、ここでは簡単な修正だ ul {list-style:outside none square;}か ul {list-style:outside none disc;}、などが...

次に左パディングをリスト要素に追加します

ul li{line-height: 1.4;padding-bottom: 6px;}