Good! We can now remove the temporary border properties and move on to the next step, creating bar labels.
At the moment, our bar labels are contained within the data-bar element as values of the data-label attribute, so we have to use an :after or :before pseudo selector in conjunction with a
content property to be able to print them.
We also need to reserve some space for those labels, because, at the moment, all of the container's height is occupied by the bars of the chart to be created.
We can achieve this by adding padding-bottom to the container (along with a box-sizing property to keep the original container height, where supported) and then placing the bar label outside and below each
data-bar element, using absolute positioning.
Here's the small chunk of CSS code we can implement to achieve this behavior:
@import "compass/css3/box-sizing";
*[data-bar-chart]{
padding-bottom: 30px;
@include box-sizing(border-box);
/* temporary property only for this...