:first-letter issue

by soul_wish

HTML

<ul>
  <li><span>SOME LIST ITEM</span></li>
  <li><span>ANOTHER LIST ITEM</span></li>
  <li><span>ONE MORE LIST ITEM</span></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
  font-size: 0;
}
ul li {
  float: left;
  margin-right: 10px;
  position: relative;
  text-transform: lowercase;
  padding-left: 18px;
  list-style: none;
  color: green;
}
ul li:first-letter {
  text-transform: uppercase;
}
ul li span {
  line-height: 24px;
  font-size: 16px;
}
ul li span:hover {
  color: orange;
}