it-swarm.dev

Kann ich CSS verwenden, um einem Element einen Aufzählungspunkt hinzuzufügen?

Ziemlich einfache Frage, aber ich bin mir nicht sicher, ob es möglich ist. Ich möchte ein Bild hinzufügen, das in allen <h1>-Elementen als Aufzählungszeichen dient. Ich weiß, dass ich dies erreichen kann durch:

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

mit css:

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

aber gibt es eine automatische Möglichkeit, das Gleiche zu tun? Ich dachte so etwas wie:

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

aber das scheint nur mit <ul> elementen zu funktionieren. Ich möchte das <span>-Element wirklich nicht überall vor dem <h1>-Element einfügen. Irgendwelche Ideen?

27
Sablefoste

Während Sie einen :before-Pseudo-Selektor verwenden können, um ein "-" oder "•" - Zeichen vor Ihrem Element hinzuzufügen, verhält es sich nicht wirklich wie ein Aufzählungspunkt. Ihr Element mag wie ein Aufzählungspunkt aussehen, aber das ist wirklich nur ein schmutziger Hack und sollte vermieden werden! 

Damit Ihr Element sowohl (1) wie ein Aufzählungspunkt aussehen soll als auch (2) sich wie ein Aufzählungspunkt verhält, sollten Sie die Attribute display, list-style-type und list-style-position dieses Elements festlegen.


BEISPIEL CODE

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>


Die fiedel

http://jsfiddle.net/L15a53cb/

36
John Slegers

Sie könnten so etwas tun:

h1:before {
    content:"• ";
}

Siehe Fiddle:

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

34
sinisake

Sie können den Pseudo-Selector :before verwenden, um vor dem Tag alles hinzuzufügen, was Sie möchten. 

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

6
AleshaOleg

So etwas sollte funktionieren

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

Die Erstellung eines Aufzählungszeichens mithilfe von before css ist sehr einfach, indem die Schriftfamilie verwendet wird. Auf diese Weise müssen keine Grafiken usw. eingefügt werden.

hier ist der Klassencode: 

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

{

1
Who Knows

Geben Sie dem Absatz oder einem Element einen Klassennamen und wenden Sie den folgenden Code an (Ich habe den Klassennamen als bullet angegeben):

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

Nein, list-style und list-style-image sind nur für ul- und ol-Tags, die Sie zur ersten Methode zurückbringen müssen oder mit js etwas erstellen müssen

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

0
Ahmad

list-style-type ist nur für ul reserviert . Sie können <h1 class="bullet"> mit dem Pseudoelement :before verwenden.

0
mwl