順序付けされていないリストで箇条書きの代わりにチェックマーク/チェックマーク記号（✓）を使用するにはどうすればよいですか？

85

リストテキストの前に目盛り記号を追加したいリストがあります。この方法で適用するのに役立つCSSはありますか？

✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text

注：このタイプのHTMLコードでこれが必要です

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

スニペットを展開

css html special-characters

— Stack-overflow-hero
ソース

150

疑似要素を使用して、各リストアイテムの前にその文字を挿入できます。

ul {
  list-style: none;
}

ul li:before {
  content: '✓';
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

スニペットを展開

— Josh Crozier
ソース

私はこれを使用し、Chrome 65で動作します。通常は1pxの実線の境界線を使用して各<li>をラップし、ul li：beforeで左とマージンを右にフロートします。要素の背景に境界線の色を設定できます。

— ymasood

解決してくれてありがとう！ラッピング時にインデントが失われるというメモを追加しました。（投稿を編集して

— 申し訳あり

@Josh：Adamの答えには、ラッピングの問題に対する解決策があります。わかりやすくするために編集しましたが、含めるかどうかはあなた次第です。

— ダン・ダスカレスク

35

使用できる3つの異なるチェックマークスタイルは次のとおりです。

ul:first-child  li:before { content:"\2713\0020"; }  /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; }  /* OR */
ul:last-child   li:before { content:"\2611\0020"; }
ul { list-style-type: none; }

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

<ul><!-- not working on Stack snippet; check fiddle demo -->
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

スニペットを展開

jsFiddle

参照：

— マイケルベンジャミン
ソース

これはJoshCrozierの答えと同じであり、ラッピングのインデントを破壊するという同じ問題に悩まされています。また、最後のキャラクターはChromium / Ubuntuでもフィドルに表示されませんが、それはとにかくポイントを超えています-Joshの答えは解決策の要点です。使用するチェックマーク文字は、デザインの選択です。

— ダン・ダスカレスク

1

@DanDascalescu、この回答は、一部の人々が知らないかもしれないチェックマークオプションを提供することにより、JoshCrozierのソリューションを拡張したものです。それは貴重な情報です。それらが「設計上の選択」であるという事実は、この回答の有用性を低下させるものではありません。私の見解では、あなたの反対票は、（1）多くの人に役立っている（そして30近くの賛成票がある）、（2）答えはスタイルの選択以外のふりをしていない、（3）私は（「とにかくポイントのほかに、」あなたが言うように、ある、）他の問題に取り組むしようとしていなかった

— マイケル・ベンジャミン

1

私が見るチェックマークの選択肢「\ 2713」と「\ 2714」は、生のUnicodeコードポイントです。彼らがどのように見えるかわかりません。回答でスタイルを選択したい場合は、実際のチェックマークをいくつか含めることができます：✓、✔、☑、✅。どのチェックマークを使用するかは、興味深い問題ではありません。チェックマークの使い方はです。「現在水中にあるボートをペイントするにはどうすればよいですか」と「どのような青の色合いでペイントできるか」とは異なります。それは理にかなっていますか？

— ダン・ダスカレスク

あなたには、あなたが望むどんな視点からでもこの答えを見る権利があります。私はあなたの意見に異議を唱えるつもりはありません。ただし、この投稿にアクセスする大多数の人々は、この回答が役立つと感じているのは事実です。そのままにしておきます。フィードバックをお寄せいただきありがとうございます。@DanDascalescu

— マイケル・ベンジャミン

2

人々はさまざまな理由で賛成します。人々はあなたとは異なる理由で賛成します。あなたはこの答えの内容に同意しません。あなたは答えが間違っていたり時代遅れだと言っているのではなく（あなたが参照したリンクのように）、あなたはそれが気に入らないだけです。それは私にとっては大丈夫です。あなたはあなたの意見を受け入れる権利があります。

— マイケル・ベンジャミン

25

ソリューションへの追加として：

ul li:before {
 content: '✓'; 
}

Font Aswesomeなど、任意のSVGアイコンをコンテンツとして使用できます。

ul {
  list-style: none;
  padding-left: 0;
}
li {
  position: relative;
  padding-left: 1.5em;  /* space to preserve indentation on wrap */
}
li:before {
  content: '';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  height: 1em;
  background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

スニペットを展開

注：他の回答が持っていたラッピングの問題を解決するには：

それぞれの左側に1.5memsのスペースを予約します <li>
次に、SVGをそのスペースの先頭に配置します（position: absolute; left: 0）

こちらがFontAwesomeの黒いアイコンです。

このCODEPENをチェックして、色を追加したりサイズを変更したりする方法を確認してください。

— アダムオルロフ
ソース

8

<ul>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
  <li>this is my text</li>
</ul>

このシンプルなCSSスタイルを使用できます

ul {
     list-style-type: '\2713';
   }

— Hitendra Singh Shekhawat
ソース

Adamの答えはラッピングの問題に触れましたが、余分なコードが大量に必要でした...これは問題なく機能します。間隔は私にとってはちょっとしたものだったので、チェックマークを<li>から離すために、最後に\ 1 \ 1を追加することになりました。

— JadenBaptista20年