web-dev-qa-db-ja.com

CSSのリスト項目の箇条書きとしてのUnicode文字

たとえば、スターシンボル（★）をリスト項目の箇条書きとして使用する必要があります。

CSS3モジュール：リスト を読みました。カスタムテキストを箇条書きとして使用する方法を説明していますが、うまくいきません。ブラウザーは::marker疑似要素をサポートしていないだけだと思います。

画像を使用せずにどうすればよいですか？

htmlcsshtml-lists
102
AntonAL

編集

もう画像を使用することはお勧めしません。このように、Unicode文字を使用するアプローチに固執します。

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>
69
agbb

箇条書きとしてテキストを使用する

エスケープされた16進HTMLエンティティ（または任意のプレーンテキスト）でli:beforeを使用します。

例

私の例では、箇条書きとしてチェックマークが付いたリストを作成します。

CSS：

ul {
    list-style: none;
    padding: 0px;
}

ul li:before
{
    content: '\2713';
    margin: 0 1em;    /* any design */
}

ブラウザの互換性

自分でテストしたことはありませんが、IE8の時点でサポートされるはずです。少なくともそれは quirksmode ＆ css-tricks と言うことです。

条件付きコメントを使用して、画像やスクリプトなどの古い/遅いソリューションを適用できます。さらに良いことに、画像には<noscript>で両方を使用します。

HTML：

<!--[if lt IE 8]>
    *SCRIPT SOLUTION*
    <noscript>
        *IMAGE SOLUTION*
    </noscript>
<![endif]-->

背景画像について

背景画像は確かに扱いやすいですが...

  1. background-sizeのブラウザサポートは、実際にはIE9の時点でのみです。
  2. HTMLテキストの色と特殊な（crazy）フォントは、HTTPリクエストが少なくてすみます。
  3. スクリプトソリューションは、HTMLエンティティを挿入するだけで、同じCSSで機能させることができます。
  4. CSSコードを適切にリセットすると、list-style（より論理的な選択）が簡単になる場合があります。

楽しい。

102
222

あなたはそれを構築することができます：

#modal-select-your-position li {
/* handle multiline */
    overflow: visible;
    padding-left: 17px;
    position: relative;
}

#modal-select-your-position li:before {
/* your own marker in content */
   content: "—";
   left: 0;
   position: absolute;
}
34
defann

これがW3Cソリューションです。 3012年に使用できます！

ul { list-style-type: "★"; }
/* Sets the marker to a "star" character */

https://drafts.c​​sswg.org/css-lists/#text-markers

17
PHPst

画像は、一部のデバイス（Retinaディスプレイを搭載したAppleデバイス）またはズームインするとピクセル化されて表示される可能性があるため、推奨されません。

これが私がこれまでに見つけた最良の解決策です。それは素晴らしく機能し、クロスブラウザ（IE 8+）です。

ul {
    list-style: none;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

重要なことは、1行に収めるには長すぎる場合にテキストが整列したままになるように、固定幅の浮動ブロックに文字を配置することです。 1.2emはキャラクターの幅です。必要に応じて変更してください。 ul要素とli要素のパディングとマージンをリセットすることを忘れないでください。

編集：ulとli：beforeで異なるフォントを使用すると、「1.2em」サイズが異なる場合があることに注意してください。ピクセルを使用する方が安全です。

12
NicolasBernier

スターを追加するには、Unicode文字22C6を使用します。

liと星の間に少し隙間を作るためにスペースを追加しました。スペースのコードはA0です。

li:before {
    content: '\22C6\A0';
}
6
Dirk

222's answer のより完全な例：

ul {
    list-style:none;
    padding: 0 0 0 2em;     /* padding includes space for character and its margin */

    /* IE7 and lower use default */
    *list-style: disc;
    *padding: 0 0 0 1em;
}
ul li:before {
    content: '\25BA';
    font-family: "Courier New", courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
    margin: 0 1em 0 -1em;   /* right margin defines spacing between bullet and text. negative left margin pushes back to the Edge of the parent <ul> */

    /* IE7 and lower use default */
    *content: none;
    *margin: 0;
}
ul li {
    text-indent: -1em;      /* negative text indent brings first line back inline with the others */

    /* IE7 and lower use default */
    *text-indent: 0;
}

古いIEバージョンのデフォルトのリストスタイルを復元するために、スターハックプロパティを含めました。これらを引き出して、必要に応じて条件付きインクルードに含めるか、背景画像ベースのソリューションに置き換えることができます。私の謙虚な意見は、この方法で実装された特別な箇条書きスタイルは、疑似セレクターをサポートしていないいくつかのブラウザーで優雅に低下するはずです。

Firefox、Chrome、Safari、およびIE8-10でテストされ、すべて正しくレンダリングされます。

4
pospi
ul {
    list-style-type: none;    
}

ul li:before {
    content:'*'; /* Change this to unicode as needed*/
    width: 1em !important;
    margin-left: -1em;
    display: inline-block;
}
3
Iacchus

このコードを試してください...

li:before {
    content: "→ "; /* caractère UTF-8 */
}
0
Charaf JRA