コミュニティ学ぶツールライブラリレジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > ` または ` タグを使用せずに HTML リストの箇条書きに色を付けることはできますか?

` または ` タグを使用せずに HTML リストの箇条書きに色を付けることはできますか?

Mary-Kate Olsen

リリース： 2024-12-10 05:18:12

オリジナル

728 人が閲覧しました

Can I Color HTML List Bullets Without Using `` or `` Tags?

HTML リストの箇条書きをスパンなしで色付けする

質問:

HTML リストの箇条書きの色は、スパンなしで変更できますか? のような要素を追加します。または <

内でタグ?

答え:

はい、li:before 疑似要素を使用してこれを実現できます:

li {
  list-style: none;
}

li:before {
  /* Use 22 for a round bullet */
  /* Use A0 for a square bullet */
  content: '22';
  display: block;
  position: relative;
  max-width: 0;
  max-height: 0;
  left: -10px;
  top: 0;
  color: green;
  font-size: 20px;
}

ログイン後にコピー

foo
bar

この手法では、

内に追加のマークアップを必要としません。要素。ただし、次のような制限があります。

サポートされるブラウザ: IE8 以降、Firefox、Chrome
箇条書きスタイルは Unicode 文字に制限されます

以上が` または ` タグを使用せずに HTML リストの箇条書きに色を付けることはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：ビューポートメタタグは、Ems とパーセンテージを使用するレスポンシブ Web デザインに必要ですか? 次の記事：他のフレックスボックス項目を左揃えのままにして、1 つのフレックスボックス項目を右揃えにするにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2281

Google Chromeのモバイル版を表示する方法こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2415

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

2029

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1916

CSS マインドマッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1988

関連トピック

詳細>

人気のおすすめ

人気のチュートリアル

詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新のダウンロード

詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート