Mobile Carrier Signal Strength using CSS

HTML

<ul id="signal-strength">
    <li class="very-weak"><div id="very-weak"></div></li>
    <li class="weak"><div id="weak"></div></li>
    <li class="strong"><div id="strong"></div></li>
    <li class="pretty-strong"><div id="pretty-strong"></div></li>
</ul>

CSS

#signal-strength {
  height: 20px;
  list-style: none;
  overflow: hidden;
}
#signal-strength li {
  display: inline-block;
  width: 5px;
  float: left;
  height: 100%;
  margin-right: 1px;
}
#signal-strength li.pretty-strong {
  padding-top: 0px;
}
#signal-strength li.strong {
  padding-top: 5px;
}
#signal-strength li.weak {
  padding-top: 10px;
}
#signal-strength li.very-weak {
  padding-top: 15px;
}
#signal-strength li div {
  height: 100%;
  background: green;
}