1. ホーム
  2. html

[解決済み] Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

2022-04-28 21:13:17

Question

I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:

list-style-image

And then giving it a URL.

However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.

Can this be done or am I forced to make it a graphic first?

How to solved?

The following is quoted from Taming Lists :

リストがあっても、箇条書きがない場合や、箇条書きの代わりに何か他の文字を使いたい場合もあるでしょう。この場合も、CSSで簡単に解決できます。ルールにlist-style: none;を追加し、LIをぶら下がりインデントで表示するようにするだけです。ルールは次のようなものになります。

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

paddingかmarginのどちらかを0に、もう一方を1emに設定する必要があります。選択した「弾丸」によっては、この値を修正する必要があります。text-indentをマイナスにすると、最初の行がその分左に移動し、ぶら下がりインデントが発生します。

HTML には標準的な UL が含まれますが、リスト項目のコンテンツの前にある弾丸の代わりに使用したい文字や HTML 実体が含まれます。この例では、右ダブルアングル引用符の""を使用します。".

<ブロッククオート

" 項目 1

" 項目2

" 項目3

" 項目4

" 私たちが作るアイテム5

   が少し長くなるように

   を折り返します。