如何从文本的两行下方获得下划线[重复]

【问题标题】：how to get that underline below two lines from the text [duplicate]如何从文本的两行下方获得下划线[重复]
【发布时间】：2018-03-22 00:53:46
【问题描述】：

我有一个需要下划线的文本，但我希望该下划线位于文本下方并有一些空格

我有一张图片来显示我需要做什么

这是我尝试过的代码

index.html

<div class="line">
<p class="text-center"> <u> Offerings </u> </p>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

不要使用下划线标签，而是使用像这样的底部边框：

.underline {border-bottom: 1px solid red;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="line text-center">
  <span class="underline"> Offerings </p>
</div>

【讨论】：