Question

I’m stuck with a seemingly simple rollover task.

Black is the default state, blue the hover state.

As you can see, in the default state only the latter digits show, at hover, the 20 has to be added (no problem), the colour changed (no problem) and the whole thing has to be vertically in the middle (the problem).

Here’s a jsFiddle of what I’ve got so far: http://jsfiddle.net/markushausammann/3YPXk/

What markup and CSS would enable such a behaviour without using images?¨

Edit: The markup doesn’t really matter, it’s a normal horizontal ul li markup. But here is an example of how the markup may look like:

<div id="nav-years">
   <ul>
      <li><a href="#" id="2002"><p class="supertext">20</p><p>02</p></a></li>
      <li><a href="#" id="2003"><p class="supertext">20</p><p>03</p></a></li>
      <li><a href="#" id="2004"><p class="supertext">20</p><p>04</p></a></li>
      <li><a href="#" id="2005"><p class="supertext">20</p><p>05</p></a></li>
    </ul>
</div>

And some CSS, but this may have to be adapted for a respective solution.

/* years navigation */
#nav-years {
    position: relative;
    display: block;
    width: 400px;
    height: 70px;
}

#nav-years ul {
    display: block;
    height: 70px;
    list-style: none;
}

#nav-years li {
    display: block;
    height: 35px;
    width: 35px;
    float: left;
    text-align: center;
    margin: 0 15px;
    overflow: hidden;
}

#nav-years a {
    display: block;
    width: 35px;
    color: #000000;
    font-size: 30px;
}

Answer 1

Something like this, but good:

http://jsfiddle.net/vUCgm/

You want to start playing with line height, and the :hover psuedo-class.