为某些文本加下划线并将下标居中

Question

请参阅附图。如何使用CSS实现这样的下划线效果？

Answer 1

我相信这正是您所寻找的：

<强> HTML：

<span class="underlined">example text<hr/>#</span>

<强> CSS：

.underlined {
    display:inline-block;
    vertical-align:text-top;
    text-align:center;
}
.underlined hr {
    border:none;
    border-top:1px solid black;
    margin:0;
}

Demo

范围显示为inline-block元素，因此它将允许<hr>内的换行元素，例如span。使用它，您可以简单地在文本本身和下标之间放置<hr>，您将获得所需的结果。需要vertical-align才能使文本本身适合文本的常规流程，将下标推送到文本下方。

但要注意，这会破坏文本的流动。我不知道你想用它做什么，但我认为可能有另一种方法来获得你想要的结果，而不必使用它。

Answer 2

这需要一些微调，但这样的事情可能有效：

<p>Your <span class="toUnderline">test <span class="subscript">3</span> some</span> more text.</p>|
<style>
   .subscript {
    line-height:-15px;
    letter-spacing:-5px;
    text-decoration:none;    
    }
     .toUnderline{
    text-decoration:underline;
   }
</style>

Answer 3

我会使用绝对定位和百分比来为您提供将其放置在类中的灵活性，并且无需调整即可重复使用。 Here is an example

像这样构建HTML：

<p>This is a simple statment with some <span class="underline">underlined text<span>3</span></span>and a number under it. But it s a bit longer to mix it up.</p>
<p>This is a simple statment with some <span class="underline">underlined text<span>3</span></span>and a number under it. But it s a bit longer to mix it up. But it s a bit longer to mix it up.But it s a bit longer to mix it up.But it s a bit longer to mix it up.But it s a bit longer to mix it up.But it s a bit longer to mix it up.</p>

像这样构建你的CSS：

p {
    font-size:1em;
    line-height:2.2em;
}
.underline {
    position:relative;
    width:auto;
    text-decoration:underline;
}
.number {
    position:absolute;
    width:100%;
    top:.5em;
    left:50%;
    text-decoration:none;
}

另一种CSS方法是：

p {
    font-size:1em;
    line-height:2.2em;
}
p span {
    position:relative;
    width:auto;
    text-decoration:underline;
}
p span span {
    position:absolute;
    width:100%;
    top:.5em;
    left:50%;
    text-decoration:none;
}