方法-リストの箇条書きの色を変更する
CSSを使用してリストの箇条書きの色を変更する方法を学びます。
箇条書きの色を変更する
- アデル
- アグネス
- ビリー
- ボブ
ステップ1)HTMLを追加します。
基本的なリストを作成します。
例
<ul>
<li>Adele</li>
<li>Agnes</li>
<li>Billy</li>
<li>Bob</li>
</ul>
ステップ2)CSSを追加します。
デフォルトでは、リストアイテムの箇条書きの色を変更することはできません。ただし、それを可能にするためにいくつかのCSSトリックを行うことができます。CSSフレームワークまたは特別なスタイルシートを使用している場合は、少し異なる方法で調整する必要があることに注意してください。
例
ul {
list-style: none; /* Remove default bullets */
}
ul li::before {
content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a
bullet */
color: red; /* Change the color */
font-weight:
bold; /* If you want it to be bold */
display: inline-block; /*
Needed to add space between the bullet and the text */
width: 1em;
/* Also needed for space (tweak if needed) */
margin-left: -1em; /*
Also needed for space (tweak if needed) */
}