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 :before
pseudo-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-type
en list-style-position
attributen 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>
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 :before
gebruiken om alles toe te voegen wat je wilt vóór je tag.
h1:before {
content: "- "
}
<h1>My H1 text here</h1>
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-type
is 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-style
en list-style-image
zijn alleen voor ul
en ol
tags 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>• </p>
om een punt voor uw woord te plaatsen