HTML/CSS 反向进度条

Question

如何编写一个向右对齐并带有文本的反向进度条？

Here's my css到目前为止，但它一直显示，好像它是从左边开始的。最初我将它编码为过渡(缓出)，但我找不到一种方法让它从右边开始并延伸到左边。

Answer 1

演示:http://jsfiddle.net/fQtnb/1/

使用

HTML:

<ul class="skillbars l">
  <li class="eight"><span>P</span></li> 
  <li class="ten"><span>I</span></li> 
  <li class="nine"><span>I</span></li> 
  <li class="eight"><span>F</span></li> 
  <li class="nine"><span>D</span></li>
</ul>
<ul class="skillbars r">
  <li class="six"><span>A</span></li> 
  <li class="nine"><span>H</span></li> 
  <li class="six"><span>W</span></li> 
  <li class="seven"><span>M</span></li> 
  <li class="eight"><span>3</span></li> 
</ul>
<div class="clear"></div>

CSS:

.clear{
    clear:both;
}

#skills {
  position: relative;
  z-index: 300;
  padding-bottom: 60px;
  -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
}

ul.skillbars {
  padding: 0;
  width: 50%;
  float:left;
}

ul.skillbars li {
  position: relative;
  line-height: 2.188em;
  margin: .5em 0;
  padding: 0 .5em;
  position: relative;
  color: white;
  text-transform: uppercase;
}

ul.skillbars.r li {
  text-align: right;
}


ul.skillbars li span {
  position: relative;
  text-transform: uppercase;
  z-index: 300;
  font-size: 1em;
}

ul.skillbars li:after {
  position: absolute;
  top: 3px;
  bottom: 3px;
  content: '';
  background-color: #104000; /* Old browsers */
}

ul.skillbars.l li:after {
left: 3px;
background-image: -moz-linear-gradient(left,  #000000 0%, #104000 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#104000)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left,  #000000 0%,#104000 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left,  #000000 0%,#104000 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left,  #000000 0%,#104000 100%); /* IE10+ */
background-image: linear-gradient(to right,  #000000 0%,#104000 100%); /* W3C */

}

ul.skillbars.r li:after {
right: 3px;
background-image: -moz-linear-gradient(left,  #104000 0%, #000000 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,#104000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(left,  #104000 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(left,  #104000 0%,#000000 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(left,  #104000 0%,#000000 100%); /* IE10+ */
background-image: linear-gradient(to right,  #104000 0%,#000000 100%); /* W3C */
}

ul.skillbars li.six:after {
  width: 60%;
}

ul.skillbars li.seven:after {
  width: 70%;
}

ul.skillbars li.eight:after {
  width: 80%;
}

ul.skillbars li.nine:after {
  width: 90%;
}

ul.skillbars li.ten:after {
  width: 95%;
}