web-dev-qa-db-ja.com

CSSを使用して箇条書きを任意の要素に追加できますか？

かなり簡単な質問ですが、可能かどうかはわかりません。すべての<h1>要素の箇条書きとして機能する画像を追加します。私はこれを達成できることを知っています：

<span class='bullet'></span><h1>My H1 text here</h1>

cSSを使用：

.bullet{
    background: url('bullet.png') no-repeat;
    display:inline-block;
    vertical-align: middle;
    background-size:100%;
    height:25px;
    width:25px;
    margin-right: 5px;
}

しかし、同じことを自動的に行う方法はありますか？私は次のようなものを考えていました：

h1{
    list-style-image: url('bullet.png');
}

しかし、それは<ul>要素でのみ機能するようです。 <span>要素の前に<h1>要素を貼り付ける必要は本当にありません。何か案は？

htmlcsscss-selectorshtml-listslistitem
31
Sablefoste

:before疑似セレクターを使用して要素の前に「-」または「•」文字を追加できますが、実際には要素が箇条書きのように動作するわけではありません。あなたの要素は箇条書きのように見えるかもしれませんが、それは本当に汚いハックであり、避けるべきです！

要素を（1）箇条書きのように見せ、（2）箇条書きのように振る舞わせるには、その要素のdisplay、list-style-typeおよびlist-style-position属性を設定する必要があります。

サンプルコード

h1 {
    display: list-item;          /* This has to be "list-item"                                               */
    list-style-type: disc;       /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type     */
    list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}
<h1>My H1 text here</h1>

ファイドル

http://jsfiddle.net/L15a53cb/

44
John Slegers

次のようなことができます：

h1:before {
    content:"• ";
}

Fiddleを参照：

http://jsfiddle.net/6kt8jhfo/6/

41
sinisake

疑似セレクター:beforeを使用して、タグの前に必要なものを追加できます。

h1:before {
    content: "- "
}
<h1>My H1 text here</h1>
7
AleshaOleg

このような何かが動作するはずです

h1, h2, h3 {
  background: url("the image link goes here") 0 center no-repeat;
  padding-left: 15px; /* change this to fit your needs */
}
2
Ben

段落または任意の要素にクラス名を付け、以下のコードを適用します（クラス名はbulletとして指定しました）。

.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
1
user8523590

Before cssを使用して箇条書きを作成する非常に簡単な方法は、フォントファミリを使用することです。この方法では、グラフィックスなどを含める必要はありません。

クラスコードは次のとおりです。

.SomeClass:before {
  font-family: "Webdings";
   content: "=  ";

{

1
Who Knows

いいえ、list-styleおよびlist-style-imageはulおよびolタグ専用です。最初のメソッドに戻るか、jsで何かを作成する必要があります

http://www.w3schools.com/css/css_list.asphttp://www.w3schools.com/cssref/pr_list-style-type.asp

0
Ahmad

list-style-typeはul専用です。 <h1 class="bullet">を擬似要素:beforeとともに使用できます。

0
mwl