CODEWITHSUNDEEP
csshtml-lists
user2326844
user2326844

Reputation: 321

How to give two different colors to one single li tag?

There is a bar chart with a gray background color and the data on the chart are represented by green. (As the image enclosed.)

I have considered only one li tag to represent each bar in the chart. Is it possible to give this li tag two different background color?

enter image description here

Upvotes: 0

Views: 1404

Answers (2)

Chris
Chris

Reputation: 6233

Yes it is using the :after element. Please check out my Fiddle on how to achieve this.

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>

Upvotes: 2

Jean-Luc Barat
Jean-Luc Barat

Reputation: 1165

You must use inner tag to do the tricks :

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

Upvotes: 0

Related Questions