css - 如何给一个 li 标签赋予两种不同的颜色？

Question

有一个灰色底色的条形图，图表上的数据用绿色表示。 (如图所示。)

我只考虑了一个 li 标签来表示图表中的每个条形。是否可以为这个 li 标签提供两种不同的背景颜色？

Answer 1

是的，它正在使用 :after 元素。请查看我的 Fiddle，了解如何实现这一点。

ul
{
  list-style:none;
}
ul li
{
  height: 30px;
  width: 150px;
  position:relative;
  background-color: #a1cd58;
  margin-bottom:5px;
}
ul li:after
{
  content:'';
  position:absolute;
  right:0;
  top:0;
  background-color: #ccc;
  height:30px; 
}
ul li.percent_70:after
{
  width:30%;
}
ul li.percent_50:after
{
  width:50%;
}
ul li.percent_30:after
{
  width:70%;
}

<ul>
  <li class="percent_70"></li>
  <li class="percent_30"></li>
  <li class="percent_50"></li>
</ul>