JSFiddle - React, Tailwind, and code Playground

by sushant_ceb

HTML

<link rel="stylesheet" href="https://material.angularjs.org/latest/angular-material.min.css">
<ul class="ul-dash">
<li class='up-arrow green'>Hello 1</li>
<li class='down-arrow red'>Hello 2 Hello 2 Hello 2 Hello 2 Hello 2</li>
<li class='up-arrow green'>Hello 3</li>
</ul>

CSS

.ul-dash {
  list-style: none;
  width: 100px;
}
.ul-dash > li.up-arrow:before {
  content: "\2191";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1em;
  font-weight: bold;
}

.ul-dash > li.down-arrow:before {
  content: "\2193";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1em;
  font-weight: bold;
}

.red:before {
  color: red;
}
.green:before { color: green}