在css中如何在带下划线的单词下获得标签？

这就是我想要的效果

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

在HTML/CSS/JavaScript中，如何直接在带下划线的单词下面获得A和B标签

开始：

我会在标记中带下划线的元素内添加标签，然后使用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.

我会在标记中带下划线的元素内添加标签，然后使用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.

标记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.

演示：

结果:

标记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.

演示：

结果:

---

另一种方法是，如果您只想获得视觉效果，而不一定要将HTML用于“a”和“B”，则可以使用：

HTML

---

演示：

另一种方法是，如果您只想获得视觉效果，而不一定要有“a”和“B”的HTML，可以使用：

HTML

---

---

演示：

你能提供更多的背景吗？你有什么？你试过什么？你被困在哪里了？如果他有这些片段，他就不需要我们的帮助了help@mplungjan此网站名为BuildEplz.com，而不是BuildEplz.com。他应该自己试试，如果他被困在这里，你可以问他。这似乎是一个有趣的问题。它是否应该关闭取决于社区。你能提供更多的背景吗？你有什么？你试过什么？你被困在哪里了？如果他有这些片段，他就不需要我们的帮助了help@mplungjan此网站名为BuildEplz.com，而不是BuildEplz.com。他应该自己试试，如果他被困在这里，你可以问他。这似乎是一个有趣的问题。它是否应该关闭取决于社区。当我检查你的小提琴时，字母A和B重叠。嗯，如果有换行符，它们会重叠。我没有换行符，但它们无论如何都会重叠。在linux.Chrome上的Firefox 18可以工作，如果视口足够大，不足以让我在Chrome中使用两行浏览器。但我推荐Cobra_Fast的解决方案；它不应该有类似的问题，因为它不使用位置：绝对，让一切保持流畅。当我检查你的小提琴时，字母a和B重叠。嗯，如果有换行符，它们会重叠。我没有换行符，但它们无论如何都会重叠。在linux.Chrome上的Firefox 18可以工作，如果视口足够大，不足以让我在Chrome中使用两行浏览器。但我推荐Cobra_Fast的解决方案；它不应该有类似的问题，因为它不使用position:absolute，让一切都保持流畅。这是一个很好的技巧，不会出现与我一样的问题，因为绝对定位。在Windows 7上的Chrome中工作，在Fx 18上工作WinXP@mplungjan谢谢你的截图：谢谢，正是我需要的！很好的技巧，没有像我一样的问题，因为绝对定位。在Windows7的Chrome上工作，在FX18上工作WinXP@mplungjan谢谢你的截图：谢谢，正是我需要的！非常感谢。这也是一个很大的帮助！非常感谢。这也是一个很大的帮助！

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

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

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';    
}