Ik heb een lijst waar ik een vinkje wil toevoegen voor de lijsttekst. Is er een CSS die me kan helpen om op deze manier toe te passen?
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
✓ this is my text
Opmerking: ik wil dit in dit type HTML-code
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
Antwoord 1, autoriteit 100%
U kunt een pseudo-elementgebruiken om dat teken voor elk lijstitem in te voegen:
ul {
list-style: none;
}
ul li:before {
content: '✓';
}
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
Antwoord 2, autoriteit 20%
Hier zijn drie verschillende vinkjes die u kunt gebruiken:
ul:first-child li:before { content:"\2713\0020"; } /* OR */
ul:nth-child(2) li:before { content:"\2714\0020"; } /* OR */
ul:last-child li:before { content:"\2611\0020"; }
ul { list-style-type: none; }
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
<ul><!-- not working on Stack snippet; check fiddle demo -->
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
Antwoord 3, autoriteit 20%
Als aanvulling op de oplossing:
ul li:before {
content: '✓';
}
U kunt elk SVG-pictogram als inhoud gebruiken, zoals de Lettertype geweldig.
ul {
list-style: none;
padding-left: 0;
}
li {
position: relative;
padding-left: 1.5em; /* space to preserve indentation on wrap */
}
li:before {
content: ''; /* placeholder for the SVG */
position: absolute;
left: 0; /* place the SVG at the start of the padding */
width: 1em;
height: 1em;
background: url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z'/></svg>") no-repeat;
}
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>This is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
Antwoord 4, autoriteit 12%
<ul>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
<li>this is my text</li>
</ul>
u kunt deze eenvoudige css-stijl gebruiken
ul {
list-style-type: '\2713';
}
Antwoord 5
Ik wil hieraan toevoegen dat voor iedereen die vastzit in een unieke situatie waarin inline css nodig is (zoals binnen een massale e-mailcontext waar e-mailclients nog steeds inline css nodig hebben), je een lijststijltype kunt gebruiken: geen en dit combineren met de tekencode voor uw opsommingsteken naar keuze (hieronder gebruikt vinkje), zoals:
<ul style="list-style-type: none;">
<li>✔ List Item 1</li>
<li>✔ List Item 2</li>
<li>✔ List Item 3</li>
<li>✔ List Item 4</li>
</ul>