display equally distributed (needs editing)

meter.css

.meter ul.markers {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: justify;
	height: 1em;
	line-height: 1em;
}

.meter ul.markers:after {
	width: 100%;
	display: inline-block;
	content: ".";
	visibility: hidden;
}

.meter ul.markers li {
	display: inline-block;
	padding: 0;
	line-height: 1em;
	height: 1em;
	position: relative;
}

.meter ul.markers li:after {
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	height: 1.25em;
	top: 1.25em;
	left: 50%;
	background: #777777;
}

.meter ul.markers li:first-child:after,
.meter ul.markers li:last-child:after {
	display: none;
}

.meter ul.markers li.first-child:after,
.meter ul.markers li.last-child:after {
	display: none;
}

.meter ul.markers li.enabled {
	cursor: pointer;
}

.meter ul.markers li.enabled:hover {
	color: #b90021;
}

.meter ul.markers li.enabled:hover:after {
	background: #b90021;
}

.meter ul.markers li .cashin-tip {
	white-space: nowrap;
	position: absolute;
	width: 100px;
	left: 50%;
	margin-left: -50px;
	padding: .5em;
	background: #b90021;
	color: #ffffff;
	top: -4em;
	display: none;
}

.meter ul.markers li.enabled:hover .cashin-tip {
	display: block;
}

.meter ul.markers li .cashin-tip:after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #b90021;
	bottom: -4px;
	left: 50%;
	margin-left: -4px;
}

.meter ul.markers li span {
	display: inline-block;
	height: 1em;
	line-height: 1em;
}

.meter ul.markers li span.bottom-nr {
	display: block;
	white-space: nowrap;
	position: absolute;
	width: 42px;
	left: 50%;
	margin-left: -21px;
	padding: 0;
	color: #ffffff;
	top: 2.5em;
}

.meter .bar {
	margin: .75em 0 0;
	height: .5em;
	width: 100%;
	background: #777777;
	border-radius: 4px;
}

.meter .bar .fill {
	background: #ffffff;
	height: .5em;
	border-radius: 4px;
}

meter.html

			<div class="meter">
				<ul class="markers">
					<li class="first-child"><!-- L --></li>
					<li><span>€ 4</span><span class="bottom-nr">99999</span></li>
					<li><span>€ 8</span><span class="bottom-nr">99999</span></li>
					<li class="last-child"><!-- L --></li>
				</ul>
				<div class="bar">
					<div class="fill" style="width: 20%;"><!-- --></div>
				</div>
			</div>