JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<ul>
  <li>Ahis is my text</li>
  <li>Bhis is my text</li>
  <li>Chis is my text, it's pretty long so it needs to wrap. Note that wrapping preserves the indentation that bullets had!</li>
  <li>Dhis is my text</li>
  <li>Ehis is my text</li>
</ul>

CSS

body {font-family:arial;}

ul {
  list-style: none;margin:0;padding:0;
}
li {font-size:18px;
margin:0 0 15px 0;
  position: relative;
  padding-left: 1em;  /* space to preserve indentation on wrap */
}
li:before {font-size:1.2em;
  color:green;
  content: '\2714';  /* placeholder for the SVG */
  position: absolute;
  left: 0;  /* place the SVG at the start of the padding */
  width: 1em;
  margin:-0.28em;

  
}