I have been attempting to create a vertical progress bar using the data-procentage tag. I have almost completed it, but for some reason, the progress bars are not aligned properly and I can't figure out why.
This is what my code looks like so far:
The HTML:
ul li {
float: left;
list-style: none;
margin:0 40px;
}
ul li a {
text-decoration:none;
}
.progressbar {
background:black;
border-radius: 0 3px 3px 0;
height: 30px;
margin: 0px 0 0 0px;
-webkit-transform: rotate(-90deg);
}
.title {
color: black;
font: 12px 'Arial';
}
.progressbar2 {
border-radius: 0 3px 3px 0;
height: 30px;
margin: 0px 0 0 0px;
}
.progressbar2:after {
content: attr(data-procentage) '%';
color: black;
font: 14px 'Arial';
}<div id="progress">
<ul>
<li>
<div class="progressbar2" data-procentage="53.40"></div>
<div class="progressbar" style="width:53.45%" data-procentage="53.40"></div>
<a href="#"><span class="title">New York</span></a>
</li>
<li>
<div class="progressbar2" data-procentage="13.25"></div>
<div class="progressbar" style="width:13.25%" data-procentage="13.25"></div>
<a href="#"><span class="title">Los Angeles</span></a>
</li>
<li>
<div class="progressbar2" data-procentage="10.37"></div>
<div class="progressbar" style="width:10.37%" data-procentage="10.37"></div>
<a href="#"><span class="title">Washington D.C.</span></a>
</li>
<li>
<div class="progressbar2" data-procentage="22.98"></div>
<div class="progressbar" style="width:22.98%" data-procentage="22.98"></div>
<a href="#"><span class="title">San Francisco</span></a>
</li>
</ul>
</div>If you'd like to see a demo, check out this fiddle http://jsfiddle.net/mvqg3d0n/
Could someone please provide assistance with aligning these progress bars? Your help would be greatly appreciated.