Kan ik CSS gebruiken om een ​​opsommingsteken toe te voegen aan een element?

Vrij eenvoudige vraag, maar ik weet niet zeker of het mogelijk is. Ik wil een afbeelding toevoegen als opsommingsteken in alle <h1>-elementen. Ik weet dat ik dit kan bereiken door:

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

met css:

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

maar is er een automatische manier om hetzelfde te doen? Ik dacht zoiets als:

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

maar dat lijkt alleen te werken met <ul>-elementen. Ik wil echt niet overal het <span>-element vóór het <h1>-element moeten plakken. Enig idee?


Antwoord 1, autoriteit 100%

Hoewel je een :beforepseudo-selector kunt gebruiken om een ​​”-” of “•” teken voor je element toe te voegen, zorgt dit er niet voor dat je element zich gedraagt ​​als een opsommingsteken . Je element ziet er misschien uit als een opsommingsteken, maar dat is eigenlijk gewoon een vuile hack en moet worden vermeden!

Om uw element zowel (1) eruit te laten zien als een opsommingsteken en (2) zich als een opsommingsteken te laten gedragen, moet u de display, list-style-typeen list-style-positionattributen van dat element.


VOORBEELDCODE

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>

Snippet uitvouwen


Antwoord 2, autoriteit 61%

Je zou zoiets als dit kunnen doen:

h1:before {
    content:"• ";
}

Zie Fiddle:

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


Antwoord 3, autoriteit 10%

Je kunt pseudo-selector :beforegebruiken om alles toe te voegen wat je wilt vóór je tag.

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

Snippet uitvouwen


Antwoord 4, autoriteit 4%

Geef een klassenaam aan de alinea of ​​een ander element en pas de onderstaande code toe
(Ik heb de klasnaam gegeven als bullet):

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

Antwoord 5, autoriteit 3%

Zoiets zou moeten werken

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

Antwoord 6

list-style-typeis alleen gereserveerd voor ul.
Je kunt <h1 class="bullet">gebruiken met pseudo-element :before.


Antwoord 7

De zeer eenvoudige manier om een ​​opsommingsteken te maken met behulp van de vóór css is om de lettertypefamilie te gebruiken … op deze manier is het niet nodig om afbeeldingen en dergelijke toe te voegen.

hier is de klascode:

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

{


Antwoord 8

Als u de grootte, kleur en positie van de puntwilt aanpassen, kunt u dit doen:

.bullet:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    background-color: #29cf00;
    vertical-align: middle;
}

Antwoord 9

Nee, list-styleen list-style-imagezijn alleen voor ulen oltags die u je moet terug naar je eerste methode of iets maken met js

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


Antwoord 10

Gewoon gebruiken
<p>&bull; </p>om een ​​punt voor uw woord te plaatsen

Other episodes