リストの箇条書きの色を変更する方法があるかどうか疑問に思っていました。
私はこのようなリストを持っています：
<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>「スパン」や「p」など、liに何も挿入することはできません。では、箇条書きの色は変更できますが、テキストは変更できませんか？
回答:
画像を使用できる場合は、これを行うことができます。また、画像がないと、箇条書きの色だけを変更してテキストを変更することはできません。
画像を使用する
li { list-style-image: url(images/yourimage.jpg); }見る
画像を使用せずに
次に、HTMLマークアップを編集し、リスト内にスパンを含めて、liとスパンに異なる色で色を付ける必要があります。
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
マークアップを追加せずにこれを管理しましたが、代わりにを使用しましたli:before。これには明らかに:before（古いIEサポートはありません）のすべての制限がありますが、非常に限られたテストの結果、IE8、Firefox、Chromeで動作するようです。弾丸のスタイルは、ユニコードの内容によっても制限されます。
li {
list-style: none;
}
li:before {
/* For a round bullet */
content: '\2022';
/* For a square bullet */
/*content:'\25A0';*/
display: block;
position: relative;
max-width: 0;
max-height: 0;
left: -10px;
top: 0;
color: green;
font-size: 20px;
}<ul>
<li>foo</li>
<li>bar</li>
</ul>font-size:1emは、より均整のとれた弾丸を手に入れていたことに注意してください！）
私たちは、組み合わせることができlist-style-imageてsvg、我々はできるの、CSSのインライン！この方法では、「弾丸」を驚くほどコントロールできます。
赤い円を取得するには、次のcssを使用します。
ul {
list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10"><circle fill="red" cx="5" cy="5" r="2"/></svg>');
}しかし、これはほんの始まりにすぎません。これにより、これらの弾丸で私たちが望むクレイジーなことを行うことができます。円や長方形は簡単ですが、あなたが描くことができるものは何でもそこに留まることができsvgます！以下のブルズアイの例を確認してください。
一部のブラウザではwidth、にheight属性を設定する必要があります<svg>。そうしないと、何も表示されません。執筆時点では、Firefoxの最近のバージョンでこの問題が発生しています。例では両方の属性を設定しました。
最近のコメントで、data-uriのエンコーディングを思い出しました。これは最近の悩みの種でした。調査した情報を少し共有できます。
データ-URI仕様参照、URIの仕様では、SVGがに従って符号化されるべきであると述べているURIの仕様。それは例えば、文字のすべての種類は、エンコードされるべきであることを意味<なり%3C。
一部のソースでは、エンコードの問題を修正する必要があるbase64エンコーディングを提案していますが、URIエンコーディングではそうではないのに、SVGのサイズが不必要に大きくなります。URIエンコーディングをお勧めします。
<svg>コードをコピーして貼り付けることができない場合があります。最初にURIエンコーダーで実行してみてください。
@Marcのソリューションの構築-弾丸文字はフォントやブラウザーによって異なる方法でレンダリングされるため、次のcss3手法をborder-radiusとともに使用して、より細かく制御できる弾丸を作成しました。
li:before {
content: '';
background-color: #898989;
display: inline-block;
position: relative;
height: 12px;
width: 12px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin-right: 4px;
top: 2px;
}これは本当に、本当に、古い質問であることはわかっていますが、私はこれをいじって、投稿されていない方法を思いつきました。リストに色を付け、::first-lineセレクターを使用してテキストの色を上書きします。私は専門家ではないので、このアプローチに何か問題があるのかもしれませんが、うまくいくようです。
li {
color: blue;
}
li::first-line {
color: black;
}<ul>
<li>House</li>
<li>Car</li>
<li>Garden</li>
</ul>@Marcと@jessicaの両方のソリューションを構築する-これは私が使用するソリューションです。
li {
position:relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 6px;
height:6px;
border-radius:6px;
left: -20px;
top: .5em;
background-color: #000;
}emフォントサイズに使用するので、top値をに設定する.5emと、常に最初のテキスト行の中間点に配置されます。left:-20pxブラウザでの箇条書きのデフォルトの位置であるので使用しました：親 padding/2
私はMarcの答えも本当に気に入りました。異なる色のULのセットが必要でしたが、明らかにクラスを使用する方が簡単でしょう。たとえば、私がオレンジに使用したものは次のとおりです。
ul.orange {
list-style: none;
padding: 0px;
}
ul.orange > li:before {
content: '\25CF ';
font-size: 15px;
color: #F00;
margin-right: 10px;
padding: 0px;
line-height: 15px;
}さらに、「content：」に使用した16進コードはMarcのものとは異なることがわかりました（その16進円は少し高すぎるように見えました）。私が使用したものは真ん中に完全に座っているようです。他にもいくつかの形（正方形、三角形、円など）を見つけました
私にとっては、CSS疑似要素を使用するのが最善の選択肢です。したがって、disc箇条書きのスタイル設定は次のようになります。
ul {
list-style-type: none;
}
li {
position: relative;
}
li:before {
content: '';
display: block;
position: absolute;
width: 5px; /* adjust to suit your needs */
height: 5px; /* adjust to suit your needs */
border-radius: 50%;
left: -15px; /* adjust to suit your needs */
top: 0.5em;
background: #f00; /* adjust to suit your needs */
}<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>ノート：
widthそして、heightポインタを保つために同じ値を持っている必要があり、丸いですborder-radiusする場合はゼロに設定できますsquareその他の箇条書きスタイルについては、他のcss形状https://css-tricks.com/examples/ShapesOfCSS/を使用できます（たとえば、三角形など、疑似要素が機能する必要がないものを選択してください）。
::markerCSS疑似要素を使用して、リストアイテムのマーカーボックス（箇条書きまたは番号）を選択できます。
ul li::marker {
color: red;
}注：この回答を投稿した時点では、これは実験的なテクノロジーと見なされており、FirefoxとSafari（これまでのところ）にのみ実装されています。
@ddilsaverの答えに基づいて構築します。弾丸にスプライトを使えるようにしたかった。これは動作するようです：
li {
list-style: none;
position: relative;
}
li:before {
content:'';
display: block;
position: absolute;
width: 20px;
height: 20px;
left: -30px;
top: 5px;
background-image: url(i20.png);
background-position: 0px -40px; /* or whatever offset you want */
}今日、これを試して、次のように入力しました。
リストに箇条書きと番号の両方でカラーマーカーを表示する必要がありました。私はこのヒントに出会い、プロパティを相互に関連付けながらスタイルシートに書き込みました。
ul,
ol {
list-style: none;
padding: 0;
margin: 0 0 0 15px;
}
ul {}
ol {
counter-reset: li;
}
li {
padding-left: 1em;
}
ul li {}
ul li::before,
ol li::before {
color: #91be3c;
display: inline-block;
width: 1em;
}
ul li::before {
content: "\25CF";
margin: 0 0.1em 0 -1.1em;
}
ol li {
counter-increment: li;
}
ol li::before {
content: counter(li);
margin: 0 0 0 -1em;
}私は弾丸を表示するために別のキャラクターを選び、それをここで見ました。マージンを適切に調整する必要がありました。選択したフォントでは値が適用されない場合があります（数値はWebフォントを使用しています）。
代わりにこれを使ってみてください：
ul {
color: red;
}インラインバージョン、Outlookデスクトップで動作します：
<ul style="list-style:square;">
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
<li style="color:red;"><span style="color:black;">Lorem.</span></li>
</ul>