使用 <a> + :after 来制作更好的 css ruby 布局但对齐不起作用

Question

我尝试重用 learnJapanese reddit (example) 中的 ruby 布局，它与 <a href='#reading' title='hiragana'>japanese kanji</a> 一起使用，然后通过 css 在标题前显示平假名 #阅读：之前。

在我的例子中，我想在单词下方显示阅读内容（使用 css :after），但我不确定如何将其与文本的其余部分对齐：

"onetwo continue"应该在同一行。

这是我希望它看起来像的示例：

jsfiddle 在这里：http://jsfiddle.net/eex8gx6g/

Answer 1

使用 position:relative 作为副标题，使用 margin-bottom 来容纳后续的文本行：

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/

使用 <a> + :after 来制作更好的 css ruby 布局但对齐不起作用

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

css

alignment