Q:

Using  + :after to make a better css ruby layout but alignment doesn't work

I've tried to reuse the ruby layout from the learnJapanese reddit (example) which works with <a href='#reading' title='hiragana'>japanese kanji</a> and then does display the hiragana before the title via css for #reading :before.   
In my case I want to display the reading below the word (using css :after) but I am not sure how I could align it with the rest of the text:

"onetwo continue" should be on the same line. 
Here is an example of what I want this to look like:

jsfiddle is here: http://jsfiddle.net/eex8gx6g/

A:

Using position:relative for the subtitle and a margin-bottom to accommodate for the subsequent lines of text:
a[href$="/reading"], a[href$="#reading"] {
    ...
    position:relative;
    margin-bottom:1em;
    ...
}

...

a[href$="/reading"]:after, a[href$="#reading"]:after {
    ...
    position:absolute;
    top:1.4em;
    left:0em;
    ...
}

http://jsfiddle.net/eex8gx6g/5/

