:root {
  --ruler-size: 3em;
  --ruler-tick-size: 0.64em;
  --ruler-tick-color: #444;
}
.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 var(--ruler-tick-color);
    color: var(--ruler-tick-color);
    margin: 0;
    height: var(--ruler-size);
    padding-right: 1in;
    white-space: nowrap;
}
.ruler li {
    padding-left: 1in;
    width: 2em;
    margin: 0.64em -1em -0.64em; /* t, rl, b*/
    text-align: center;
    position: relative;
    text-shadow: 1px 1px hsl(60, 60%, 84%);
    /*border:1px solid red;*/
}
.ruler li:before {
    content: '';
    position: absolute;
    border-left: 1px solid var(--ruler-tick-color);    /* tick color */
    height: var(--ruler-tick-size); /* tick height */
    bottom: -1.28em;
    right: 1em;                     /* half of width */
}
.vruler, .vruler li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.vruler {
    display: inline-block;
}
/* IE6-7 Fix */
.vruler, .vruler li {
    *display: inline;
}
.vruler {
    background: lightYellow;
    box-shadow: -1px 0 1em hsl(60, 60%, 84%) inset;
    border-radius: 2px;
    border: 1px solid var(--ruler-tick-color);
    color: var(--ruler-tick-color);
    margin: 0;
    width: var(--ruler-size);
    padding-bottom: 1in;
    white-space: nowrap;
    margin-right: -4px;
}
.vruler li {
    padding-top: 1in;
    height: 2em;
    margin: 0em 0.64em -2em;
    text-align: center;
    position: relative;
    text-shadow: 1px 1px hsl(60, 60%, 84%);
    line-height: 0em;
    /*border:1px solid red;*/
}
.vruler li:before {
    content: '';
    position: absolute;
    border-top: 1px solid var(--ruler-tick-color);
    width: var(--ruler-tick-size);
    right: -.64em;
    bottom: 2em;
}