[解決済み] CSS の list-item の箇条書きのための Unicode 文字
2022-08-24 16:28:30
質問
リストアイテムの箇条書きに星印(★)を使いたいのですが、どうすればいいですか?
私は
CSS3 モジュールを読みました。リスト
を読みましたが、カスタムテキストを箇条書きにする方法は説明されています。私が思うに、ブラウザが単に
::marker
擬似要素に対応していないだけだと思います。
画像を使わずに、どうすればいいのでしょうか?
どのように解決するのですか?
編集
私はもう画像を使うことをお勧めしません。私なら、このようにユニコード文字を使用するアプローチにこだわりますね。
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>
関連
-
ローカルリソースのロードが許可されていない問題を解決する
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] 最初の要素にクラスを指定するCSSセレクタ
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み】CSSを使用して、すべてのブラウザでdiv要素を垂直方向に中央に配置するにはどうすればよいですか?
-
[解決済み】CSSでテキストを挿入する方法
-
[解決済み] Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image
-
[解決済み] 箇条書きに Font Awesome アイコンを使用し、単一のリストアイテム要素で使用する
最新
-
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 - カーソルを置いたときに塗りつぶしの色を変更する - SVG PATH
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] クリック可能なラベルを持つチェックボックスを作成するには?
-
[解決済み] mailto:を使ってメールの件名や内容を設定することはできますか?
-
[解決済み] HTMLでBase64画像を表示する方法
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] HTML Input="file" Accept Attribute File Type (CSV)
-
[解決済み] Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image