Untitled

dabblet.css

body {
  font: 16px/1.4 "Helvetica Neue", Arial, sans-serif;
}
ul {
  list-style: none;
  border:1px solid #555;
  padding:20px;
  margin:0;
  width:520px;
}
li {
  text-transform:lowercase;
  line-height:30px;
  padding:6px;
  display:inline-block;
  margin:0 20px 5px 0;
}
li:before {
  content:"";
  display:inline-block;
  width:18px;
  height:18px;
  border-radius:9px;
  margin-right:10px;
}
li.adocicado:before {
  background-color:#6f0c92;
}
li.amadeirado:before {
  background-color:#776956;
}
li.citrico:before {
  background-color:#ffba00;
}
li.picante:before {
  background-color:#ff0000;
}
li.seco:before {
  background-color:#0085d3;
}
li.amargo:before {
  background-color:#9a0000;
}
li.refrescante:before {
  background-color:#79d034;
}

dabblet.html

<ul>
  <li class="adocicado">Adocicado</li>
  <li class="amadeirado">Amadeirado</li>
  <li class="citrico">Cítrico</li>
  <li class="picante">Picante</li>
  <li class="seco">Seco</li>
  <li class="amargo">Amargo</li>
  <li class="refrescante">Refrescante</li>
</ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}