ダッシュとカスタムフォントの色を使用するリストのHTML

Question

WordpressのWebサイトを完成させていますが、私の最後の課題は、ドットではなくダッシュで箇条書きリストを作成することです。

ここでいくつかの回答を試しましたが、何も問題なく動作しています。

テキストとダッシュ（それが青い背景の上だとして）白でなければなりません

- 持続可能な成長、

- 増加の利益、

- 市場シェアと

を展開する - 効率を向上させます

Answer 1

UL-> LIを使用している場合は、次の手順を実行できます。

1）ペイントでハイフンを描きます。このことができます

ul { 
    list-style-image: url('hyphen.png'); 
} 

希望:)

Answer 2

あなたはハイフンを表示するために:beforeを使用することができます。 2）CSSでPNG 3）として保存し、あなたのULのために、あなたはこのスタイルを適用することができます。ダッシュ以来

ul { 
 
    margin: 0; 
 
} 
 
ul.hyphen { 
 
    list-style-type: none; 
 
} 
 
ul.hyphen > li { 
 
    text-indent: -10px; 
 
} 
 
ul.hyphen > li:before { 
 
    content: "-"; 
 
    text-indent: -10px; 
 
}

Some text 
 
<ul class="hyphen"> 
 
    <li>list 1</li> 
 
    <li>list 2</li> 
 
    <li>list 3</li> 
 
</ul> 
 
Last text

Answer 3

「 - 」のVinodは彼の答えで提案されているかをシミュレートするために::beforepseudo-elementを使用-IHMO-としてあなたがイメージを使用することができ、箇条書きスタイルの種類についてsupported valueではありません簡単なソリューションに必要なスタイル

ul { 
 
    background-color: blue; 
 
    color: white; 
 
    list-style-type: none; 
 
} 
 

 
li::before { 
 
    content: "– "; 
 
}

<ul> 
 
    <li>sustainable growth,</li> 
 
    <li>increase profits,</li> 
 
    <li>expand market share and</li> 
 
    <li>improve efficiency</li> 
 
</ul>

（まだlittle browser supportと）別（クーラー）ソリューションは、独自の箇条書きスタイルを定義するために@counter-styleを使用することでしょう。

プロダクションブラウザをご使用の場合は、Firefoxでのみ動作します。 （11月'17）

@counter-style dash { 
 
    system: cyclic; 
 
    symbols: "–"; 
 
    suffix: " "; 
 
} 
 

 
ul { 
 
    background-color: blue; 
 
    color: white; 
 
    list-style-type: dash; 
 
}

<ul> 
 
    <li>sustainable growth,</li> 
 
    <li>increase profits,</li> 
 
    <li>expand market share and</li> 
 
    <li>improve efficiency</li> 
 
</ul>