FaustL,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<style>
.mark{background: #A8D12E;
border-radius: 2px;
color: #FFFFFF;
display: block;
float: right;
font-family: "Roboto", "Arial";
font-size: 26px;
font-weight: 100;
height: 50px;
line-height: 31px;
margin-left: 2px;
position: relative;
text-align: center;
width: 60px;}
span.title {
background: rgba(0, 0, 0, 0.102);
bottom: 0px;
display: block;
font-size: 12px;
font-weight: 300;
height: 18px;
left: 0px;
line-height: 16px;
position: absolute;
right: 0px;
text-align: center;
width: 100%;
}
</style>
<body>
<div class="mark">0</div>
<div class="mark">0.75</div>
<div class="mark">1.33</div>
<div class="mark">2.5</div>
<div class="mark">3.8</div>
<div class="mark">4.4</div>
<div class="mark">4.9</div>
<div class="mark">5</div>
<script>
var rus = ['Плохо', 'Не очень', 'Хорошо', 'Отлично', 'Лучшее'];
var stars = [2, 3, 4, 5];
[].forEach.call(document.querySelectorAll('.mark'), function (mark) {
var span = document.createElement('span'),
num = +mark.firstChild.nodeValue,
str = '';
for (var i = 0; i < stars.length; i++) {
if (num < stars[i]) break
}
str = rus[i];
span.className = 'title';
span.appendChild(document.createTextNode(str))
mark.appendChild(span);;
});
</script>
</body>
</body>
</html>