css - 如何在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/

结果：

Answer 2

另一种方法是，如果您只想要视觉效果而不一定要有HTMLfor 'A' 和 'B' <span>，将使用CSS3 :before pseudo-element：

HTML

<span id="a" class="labeled">blahblahblah</span> blah blah 
<span id="b" class="labeled">blahblahalhab</span> foo bar.

CSS

span.labeled {        
    border-bottom: 1px solid black;
    position: relative;
}

.labeled:before{
    margin-top: 25px;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
}
#a:before{
    content: 'A';
}
#b:before{
    content: 'B';    
}

演示：http: //jsfiddle.net/cu8Q5/

Answer 3

我会在标记的下划线元素内添加标签，然后使用 CSS 重新定位：

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

.underlined {
    position: relative;
    text-decoration: underline;
}

.label {
    position: absolute;
    top: 105%;
    display: block;
    width: 100%;
    text-align: center;
}

http://jsfiddle.net/AyC84/