Show text on top of the tick in the ruler - html

Question

The code is provided in the fiddle link below.
JSFiddle Link
Code:
$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
var ruler = $(this).empty(),
len = Number(ruler.attr("data-items")) || 0,
item = $(document.createElement("li")),
i;
for (i = 0; i < len; i++) {
ruler.append(item.clone().text(i + 1));
}
});
// Change the spacing programatically
function changeRulerSpacing(spacing) {
$(".ruler").
css("padding-right", spacing).
find("li").
css("padding-left", spacing);
}
$("#spacing").change(function() {
changeRulerSpacing($(this).val());
});
});
.ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul>
<div>
<ul class="ruler" data-items="10"></ul>
</div>
<div>
<label for="spacing">Spacing</label>
<select id="spacing">
<option>1cm</option>
<option>2cm</option>
<option>1in</option>
<option>1em</option>
<option>20px</option>
</select>
</div>
How can I show the text on top, next to the li tick in the provided link?
Currently, I am adding vertical-align:top to the css .ruler li but nothing changes in the UI.
Please check the image below. The requirement is shown in blue.
What css property in what css class do I need to add to make sure the text is shown at top and next to the tick?

Answer 1

Simply move the list items slightly to the right and up. Then move the :before pseudo elements the same amount to the left and down.
http://jsfiddle.net/kwcug/1006/
And I'm not sure why my update causes JSFiddle to think this one now has 1006 revisions.

Answer 2

Add some left position to your ruler li and adjust your right position in li:before
$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
var ruler = $(this).empty(),
len = Number(ruler.attr("data-items")) || 0,
item = $(document.createElement("li")),
i;
for (i = 0; i < len; i++) {
ruler.append(item.clone().text(i + 1));
}
});
// Change the spacing programatically
function changeRulerSpacing(spacing) {
$(".ruler").
css("padding-right", spacing).
find("li").
css("padding-left", spacing);
}
$("#spacing").change(function() {
changeRulerSpacing($(this).val());
});
});
.ruler,
.ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler,
.ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
top: -.64em;
left: .64em
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
right: 1.4em;
}
/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}
div {
margin-top: 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" src="http://fonts.googleapis.com/css?family=Ubuntu" />
<ul class="ruler">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>
<ul class="ruler" data-items="10"></ul>
</div>
<div>
<label for="spacing">Spacing</label>
<select id="spacing">
<option>1cm</option>
<option>2cm</option>
<option>1in</option>
<option>1em</option>
<option>20px</option>
</select>
</div>

Answer 3

Does this help?
http://jsfiddle.net/kwcug/1008/
I changed this
.ruler li {
margin: .64em -1em -.64em;
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}
to
.ruler li:before {
content: '';
border-left: 1px solid #ccc;
margin-right: .2em;
}
.ruler li {
margin: 0 -1em -.64em;
}