css - 在 css3 中创建这样的堆栈控件

Question

如何创建像上面这样的堆栈控件？以下是我尝试过的方法，但是当我在任何一侧添加文本时，它都会中断。

  div#storage ul.storage li {
      display: inline-block;
      width: 22px;
      height: 10px;
      margin-right: 6px;
      background: green;
  }

  div#storage ul.storage li:nth-child(n+3) {
      background: lightgrey;
  }

http://jsbin.com/tehijapi/15/edit

如何在 pure css3 中创建这样的堆栈。

Answer 1

你可以通过使用伪元素来做到这一点(我假设你的内容是静态的)

  ul.storage:before{
    content: 'Storage';
  }
  ul.storage:after{
    content: '25% Usage';
  }

JS Bin Sample | JS Bin Sample with JS assigned data (使用 HTML5 数据属性)