如何为一个li标签提供两种不同的颜色？

Question

有一个带有灰色背景颜色的条形图，图表上的数据用绿色表示。 （如图所示。）

我只考虑过一个li标签来代表图表中的每个条形码。是否有可能给这个li标签两种不同的背景颜色？

Answer 1

是的，它正在使用:after元素。请查看我的小提琴，了解如何实现这一目标。

＆＃13;

＆＃13;

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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你必须使用内部标签来做技巧：

<ul>
    <li style="background-color:#B4B7B0; list-style:none; width:100%"><span style="display:block; width: 60%; background-color:#A0CF4F">&nbsp;</span></li>
</ul>