web-dev-qa-db-ja.com

画像ではなく通常の文字である<ul>の<li>要素のカスタム箇条書き記号

CSS属性を使用して、カスタムグラフィックを置換箇条書き文字に指定できることを理解しています。

list-style-image

そして、それにURLを与えます。

ただし、私の場合は、「+」記号を使用したいだけです。そのためのグラフィックを作成し、それを指す必要はありません。順不同リストにプラス記号を箇条書き記号として使用するよう指示するだけです。

これを行うことができますか、それとも最初にグラフィックにする必要がありますか？

htmlcsswebkitmobile-webkit
106
idStar

以下は Taming Lists から引用されています：

リストはあるが、箇条書きが必要ない場合や、箇条書きの代わりに他の文字を使用したい場合があります。繰り返しますが、CSSは簡単なソリューションを提供します。リストスタイルを追加するだけです：なし。ルールに従って、LIを強制的にインデント付きで表示するようにします。ルールは次のようになります。

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

パディングまたはマージンのいずれかをゼロに設定する必要があり、もう1つは1emに設定します。選択した「箇条書き」によっては、この値を変更する必要がある場合があります。負のtext-indentを指定すると、最初の行がその量だけ左に移動し、ぶら下がりインデントが作成されます。

HTMLには標準のULが含まれますが、リストアイテムのコンテンツの前にある箇条書きの代わりに使用する文字またはHTMLエンティティが含まれます。この例では、右二重引用符"を使用します。

"アイテム1
"アイテム2
"アイテム3
"アイテム4
"作成するアイテム5
もう少し長く
ラップします

69
TJ WealthEngine API Evangelist

これは遅い答えですが、私はこれに出くわしました...折り返す行のインデントを正しくするには、次のように試してください：

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}
153
Mike T

非常に多くのソリューション。
しかし、まだ改善の余地があると思います。

利点：

  • 非常にコンパクトなコード
  • 任意のフォントサイズで動作します
    （絶対ピクセル値は含まれません）
  • 行を完全に揃えます
    （最初の行と後続の行の間にはわずかなずれはありません）
ul {
        position: relative;
        list-style: none;
        margin-left: 0;
        padding-left: 1.2em;
}
ul li:before {
        content: "+";
        position: absolute;
        left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>
31
Jpsy

これがW3Cソリューションです。現時点では、これは少なくともFirefoxで機能します。

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

http://dev.w3.org/csswg/css-lists/#marker-content

23
PHPst

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

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

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

重要なことは、1行に収まらないほど長い場合にテキストが整列したままになるように、固定幅のフローティングブロックに文字を配置することです。 1.2emはキャラクターの幅です。必要に応じて変更してください。

18
NicolasBernier

:before擬似セレクターを使用して、リストアイテムの前にコンテンツを挿入できます。 http://www.quirksmode.org/css/beforeafter.html でQuirksmodeの例を見つけることができます。これを使用して、ブロック引用の周りに巨大な引用を挿入します...

HTH。

10
Tieson T.

私のソリューションは、位置合わせを使用して、ラップされた行を自動的に正しく整列させます。したがって、li：beforeでpadding-rightを設定することを心配する必要はありません。

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
9
user648519

Font-awesomeは、すぐに使用できる優れたソリューションを提供します。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>
8
sdw

<li>リスト項目に影響を与えないように、<ol>のスタイルを修飾することをお勧めします。そう：

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}
7
silverliebt
.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
4
bob

興味深いことに、投稿されたソリューションはどれも十分ではありません。使用されているキャラクターが1em幅であるという事実に依存しているため、そうである必要はありません（ただし、物事を別の方法で複雑にします）。私の試みは次のとおりです。

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

これには次の利点があります（他のソリューションよりも）

  1. シンボルの幅に依存しないを例に示します。 2つの文字を使用して、広い弾丸でも機能することを示しました。他のソリューションでこれを試してみると、テキストが不揃いになります（実際には、高ズームでは*記号で表示されます）。
  2. 合計弾丸が使用するスペースの制御が得られます。 30pxは何でも置き換えることができます（1emなど）。 3つの場所すべてで変更するのを忘れないでください。
  3. 合計弾丸の配置の制御が得られる場合。 text-align: center;をお好みのものに置き換えてください。たとえば、color: red; text-align: right; padding-right: 5px; box-sizing: border-box;を試すこともできますが、border-boxを使用したくない場合は、幅（この例ではwidth：25px）からパディング（5px）を引くだけです。多くのオプションがあります。
  4. フロートを使用しないため、どこにでも格納できます。

楽しい。

1
gorn

負のマージンを使用することを好みます。

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

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
1
John Magnolia

Emダッシュスタイル：

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
0
dmartinezfernandez