[解決済み] UL/LIのhtmlリストで、画像やspanタグを使わずにCSSで箇条書きの色を設定する方法【重複
2022-03-18 23:10:42
質問
単純なソートされていないリストで、いくつかの
<li>
という項目があります。今、私は弾丸が正方形になるように
list-style:square;
しかし
<li>
の項目は
color: #F00;
では
すべて
が赤くなる!?
四角い弾丸の色だけを設定したいのに。このような場合 エレガントな方法 をCSSで定義してください。
スプライト画像やspanタグを一切使用せずに。
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
CSS
li{
list-style:square;
}
解決方法は?
最も一般的な方法は、次のようなものです。
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li::before {
content: "• ";
color: red; /* or whatever color you prefer */
}
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
JSFiddleです。 http://jsfiddle.net/leaverou/ytH5P/
バージョン8以降のIEを含むすべてのブラウザで動作します。
関連
-
[CSSチュートリアル】CSS たった1行のコードでアバターと国旗の一体化を実現
-
[CSSチュートリアル]z-indexの違い。cssのz-index: 0とz-index: autoの違い。
-
[CSSチュートリアル】QQtabBarからCSS命名規則BEMの詳細を見る
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル】新しいCSS:whereと:is擬似クラス関数とは?
-
[CSSチュートリアル】ネイティブCSSでテキストの無制限回転を実現する汎用的な方法
-
[CSSチュートリアル]モバイルにおけるviewportの具体的な使い方
-
[解決済み] 順序付きリストの2行目のインデントをCSSで維持するには?
-
[解決済み] How to line-break from css, without using <br />?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル】CSSアニメーション 途中で止める方法とポーズを維持する方法
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】CSSもこんな風に遊べる?気まぐれグラデーションの極意
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[CSSチュートリアル】CSSで炎のエフェクトを記述する方法
-
[css3]赤いパケットのジッター効果を実現するCSS3
-
[解決済み] CSSのコンテンツ値にユニコード文字を配置する [重複]。