HTMLリストスタイルタイプのダッシュ

222

ダッシュ（つまり-または– –または— —）を使用してHTMLでリストスタイルを作成する方法はありますか？

<ul>
  <li>abc</li>
</ul>

出力：

- abc

私はそのようなことでこれを行うことが思い浮かびましたが、私li:before { content: "-" };はそのオプションの短所を知りません（そしてフィードバックが非常に義務付けられます）。

より一般的には、リストアイテムに一般的な文字を使用する方法を知っていてもかまいません。

html  css  xhtml  html-lists 
— ブライアンM.ハント
ソース
79
ダッシュがリストで一般的に使用されているので、なぜそれがデフォルトでCSSに含まれていないのですか？
— テミルベク
101
さらに重要なのは、なぜアルメニア語の番号とカタカナがあるのですか...ダッシュではないのですか？
— Henry C

回答:

108

あなたは使用することができます:beforeし、content:これは以下のIE 7またはでサポートされていないことを念頭に。これで問題がなければ、これが最善の解決策です。詳細については、「使用できる」または「QuirksMode」 CSS互換性の表を参照してください。

古いブラウザで機能する少し厄介な解決策は、箇条書きの画像を使用して、画像をダッシュ​​のようにすることです。例については、W3C list-style-imageページを参照してください。

— ダーコZ
ソース
27
の問題:beforeは、リスト項目が複数の行にまたがる場合、2行目のインデントがダッシュのある場所から始まるため、インデントされたリストの効果が台無しになることです。これを回避するには、ぶら下げインデントを使用する必要があります。これを参照してください：alistapart.com/articles/taminglists
— chiborg
3
mdashをcontent使用するにはcontent: "\2014\a0"
— Ivan Z
@threeの回答を参照してください。これは、より一般的で冗長ではありません。
— ベンVertonghen
221

:before疑似クラスでインデントされたリストの効果を維持する簡単な修正（テキストインデント）があります。

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text
スニペットを展開

— aron.lakatos
ソース
14
機能しますlist-style-type: none;が、<ul>要素にを配置することを忘れないでください。
— toesslab 2015
5
インデントなしだけul li:before{ content:"- ";}
— Qlimax
4
コンテンツフローからより簡単に引き出すことができるを追加するdisplay: block; float: left;ことを好みli:beforeます。そうしないと、最初の行と後続の行を正しく整列させるのがかなり難しく/バギーになります。または、Keyan Zhangの答えも、絶対配置でこれを行います。
— Simon East
8
list-style-type dashCSSにはまだ含まれていない、かなり馬鹿げている
— Pixelomo
あなたが提案したものに似たHTMLのみのソリューションは何でしょうか？
— プルトン
74

以下は、相対位置または絶対位置がなく、テキストインデントがないバージョンです。

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

楽しい ;）

— ベロップ
ソース
1
すごい！「ul.dash> li：before」をお勧めします。そうしないと、内側のulがめちゃくちゃになります。
— w.stoettinger
1
コンテンツフローからより簡単に引き出すことができるを追加するdisplay: block; float: left;ことを好みli:beforeます。そうしないと、最初の行と後続の行を正しく整列させるのがかなり難しく/バギーになります。または、Keyan Zhangの答えも、絶対配置でこれを行います。
— サイモンイースト
私は、ナビゲーションとしてこれを使用する.activeと、クラスli:before { visibility: hidden; }とli.active:before { visibility: visible; }
— sshow
最高の提案いも！
— ベンVertonghen
64

これを使って：

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
— ジェイス
ソース
3
残念ながら、CSSテキストの色は考慮されていません。
— ヘレブラ2013
7
メールの唯一の可能な解決策
— Oleg
現在、Gmail（2018年11月）とOutlook 2016の両方で機能していません。
— user2875289 2018年
25

私も自分のバージョンを追加してみましょう。ほとんどの場合、自分の優先する解決策を再び見つけるためです。

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}
<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>
スニペットを展開

https://codepen.io/burningTyger/pen/dNzgrQ

— 三
ソース
私見はこれまでのところ最高のソリューションです。共有のためのTHX！
— アクセル
14

私の場合、このコードをCSSに追加します

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

十分でした。単純です。

— アルバート・ソスノウスキー
ソース
1
これについて言及する別の回答が見つからないため、これはCSSへの比較的新しい追加であると仮定しますが、最近これは本当に受け入れられる回答になるはずです。
— ahstro 2017年
4
これはデスクトップFirefoxでのみサポートされているようです：developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
— dave
これはChromeでもサポートされるようになりました（現時点では79と考えています）：chromestatus.com/feature/5893875400966144およびcaniuse.com/#feat=mdn-css_properties_list-style-type_string
— Alex
9

少し試行錯誤した後、li：beforeにはcssルールのdisplay：inline-blockも必要だったため、上位の回答の1つはうまくいきませんでした。

したがって、これは私にとって完全に機能する答えです：

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}
— ジョーリー
ソース
これはLESS / SASSで書かれています。
— Arslan Ameer
7 
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
— ユーザー3849374
ソース
おそらく `` `ul {margin：0; リストスタイルタイプ：なし。} ul li：before {content： "-";} `` `そうでなければolリストにも影響します
— Sasha Bond
5

ここに私のフィドルバージョンがあります：

上の（modernizr）クラスは.generatedcontent、<html>実質的にIE8 +と他のすべての健全なブラウザを意味します。

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS：

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}
— ビジクロップ
ソース
3

より良い方法があるかどうかはわかりませんが、ダッシュを表すカスタムの箇条書きのグラフィックを作成してから、ブラウザでリストスタイルタイプのリストで使用することを通知できますプロパティます。そのページの例は、グラフィックを箇条書きとして使用する方法を示しています。

私は：beforeを使用しようとしたことがありませんが、うまくいくかもしれません。欠点は、一部の古いブラウザではサポートされないことです。私の腸の反応は、これはまだ考慮に入れるのに十分重要であるということです。将来的には、これはそれほど重要ではなくなる可能性があります。

編集：私はOPのアプローチで少しテストを行いました。IE8では、この手法を機能させることができなかったため、まだクロスブラウザーではありません。さらに、FirefoxとChromeでは、list-style-typeを一緒にnoneに設定しても無視されるようです。

— TNi
ソース
3

私の解決策は、mdashを含む余分なスパンタグを追加することです。

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

そしてCSSに追加：

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}
— ビクター・スタグロフ
ソース
3

別の方法：

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}
— イモス
ソース
3

CSS：

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML：

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
— 黒栗
ソース
1
これは、複数の行にまたがるアイテムに対しては機能しません
— ジェンランプトン2018年
2

lu liを使用する代わりに、中古dl (definition list) and dd。 <dd>などの標準のcssスタイルを使用して定義し{color:blue;font-size:1em;}、htmlタグの後に配置するシンボルをマーカーとして使用できます。ul liのように機能しますが、任意の記号を使用できますul li。通常使用するインデントされたリスト効果を取得するには、記号をインデントする必要があります。

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

よりクリーンなコードを提供します！そうすれば、どんなタイプのキャラクターでもマーカーとして使用できます！インデントはほぼ-10pxあり、完璧に動作します！

— キャロリン・コントイス
ソース
7
これは2つの理由でかなり悪いです。まず、弾丸の文字をテキストに直接配置し、コンテンツとスタイルを混合します。第二に、あなたはdl要素を誤用している、これが正しい使い方に関する記事です。
— mzgajner 2014年
1

今日この問題を抱えている人にとって、解決策は簡単です：

リスト形式： "-"

— ビーバット
ソース
-1

私のために働いたのは 

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>
— Cオニール
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.