Append text before and after container - css

Question

How can i append text before and after the container as shown in the image below.
<div class="volume-container">
<div class="pb1">
<div id="progress-bar"></div>
</div>
</div>
Below is my fiddle for the same.
http://codepen.io/anon/pen/cErwo

Answer 1

Use display:inline-block in div. That makes div to act like a inline element but allows you to set element height. Another option would be using float: left and block level elements.. but this way is better:
http://codepen.io/anon/pen/hsFLi
HTML:
<div class="volume-container">
<span>Pre</span>
<div class="pb1">
<div id="progress-bar"></div>
</div>
<span>after</span>
</div>
CSS:
.volume-container {
width: 100%;
margin: 0 auto;
}
.pb1 {
width: 17.5%;
border: 1px solid;
background: #dddddd;
display:inline-block;
}
#progress-bar, #progress-bar2 {
width: 0;
height: 20px;
line-height: 20px;
background: #79a151;
font-family: calibri;
color: white;
display:inline-block;
text-align: center;
overflow: hidden;
}

Answer 2

-DEMO-
You can just use Pseudo elements and data-* attributes on .pb1 like this:
Html:
<div class="volume-container">
<div class="pb1">
<div id="progress-bar"></div>
</div>
</div>
First make sure that .pb1 has a position:relative and use content:attr(data-percentage)" Usage";
Css:
.volume-container {
width: 100%;
margin: 0 auto;
}
.pb1 {
margin-left:100px;
width: 17.5%;
border: 1px solid;
background: #dddddd;
position:relative;
}
.pb1:before,.pb1:after{
position:absolute;
top:0;
}
.pb1:before{
left:-100px;
content:"analysis volume"
}
.pb1:after{
content:attr(data-percentage)" Usage";
right:-100px;
}
#progress-bar, #progress-bar2 {
width: 0;
height: 13px;
line-height: 20px;
background: #79a151;
font-family: calibri;
color: white;
text-align: center;
overflow: hidden;
}
then set $('.pb1').attr('data-percentage',width); to .pb1
Js:
var progressBar = $('#progress-bar'),
width = 0;
progressBar.width(width);
var interval = setInterval(function() {
width += 1;
$('.pb1').attr('data-percentage',width);
progressBar.css('width', width + '%');
document.getElementById("progress-bar").innerHTML = width;
if (width >= 100) {
clearInterval(interval);
}
}, 100);