Hoe maak je met CSS een vinkje?

Een rood vinkje achter een tekst maak je als volgt. In het voorbeeld zet ik achter het eerste list-item <li> met de class ‘vinkje’ een rood vinkje.

• Eerste
• Tweede

Om het vinkje absoluut te kunnen positioneren ten opzichte van het list-item, maken we de position van het list-item relative. We plaatsen het vinkje met het pseudo-element ::after achter de inhoud van het list-item. We geven de breedte en de hoogte verschillende waarden. Vervolgens maken we alleen de rechter- en de onderrand rood; de beide andere randen maken we transparant. Ten slotte draaien we het geheel 45 graden, zodat het met de punt naar beneden staat.

li.vinkje {position:relative;}
li.vinkje::after { 
  content: " ";
  position:absolute;
  top: 10px;
  width:7px;
  height:13px;
  margin-left:10px;
  border-width:3px;
  border-style:solid;
  border-color: transparent red red transparent;
  transform: rotate(45deg);
}