Hoe gebruik je een vinkje / vinkje (✓) in plaats van opsommingstekens in een ongeordende lijst?

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>

Snippet uitvouwen


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>

Snippet uitvouwen


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>

Snippet uitvouwen


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.

voer hier de afbeeldingsbeschrijving in

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>

Snippet uitvouwen


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>&#10004; List Item 1</li>
  <li>&#10004; List Item 2</li>
  <li>&#10004; List Item 3</li>
  <li>&#10004; List Item 4</li>
</ul>

Other episodes