如何在css中带下划线的单词下面添加标签？

Question

这是我正在寻找的效果

blahblahblah blah blah blahblahalhab foo bar.
------------           -------------
     A                       B

如何直接在HTML/CSS/JavaScript中带下划线的单词下面添加A和B标签？

开始:

<p><span><u>text number 1</u></span> followed by <span><u>text number 2</u></span> end of sentence</p>
<p>        <span>A</span>                                  <span>B</span></p>

Answer 1

标记(HTML):

<span class="labeled">blahblahblah<span class="label">A</span></span> blah blah <span class="labeled">blahblahalhab<span class="label">B</span></span> foo bar.

风格(CSS):

span.labeled {
    display: inline-block;
    vertical-align: top;
}
span.labeled span.label {
    display: block;
    text-align: center;
    border-top: 1px solid black;
} 

演示:http://jsfiddle.net/SxaK6/

结果: