如何居中和更改下划线的长度

Question

我有文本只需要在单词的中间部分下加下划线。

我已经创建了小提琴，我希望下划线应该居中，如下图所示。

我在小提琴中包含的CSS代码是：

.footer p
{
  width: 50%;
  border-bottom: 1px solid #f51c40;
}

Answer 1

您可以使用带有left: 50%; transform: translate(-50%);的绝对定位的伪元素，以相对于内容自动将其水平居中。

.footer p {
  display: inline-block;
  position: relative;
}
.footer p:after {
  content: "";
  height: 1px;
  width: 50%;
  background-color: red;
  position: absolute;
  bottom: -.5em;
  left: 50%;
  transform: translate(-50%);
}

<div class="footer">
  <p>ADDITIONAL INFO</p>
</div>

Answer 2

您可以使用 ：：after 伪元素。 如果你不知道伪元素是什么，我建议你在这里了解它们，因为它是你经常使用的CSS的一个非常重要的部分。 ：：After 伪元素能够在某个元素之后添加内容。

您可以在 p 元素后创建边框，例如：

.footer p::after {content:""; height: 1px; width: 50px; background-color: red;}

Answer 3

这可以通过多种方式完成，并且需要您提供更多信息......

这是我头顶上的一种方式，非常直接

<div class="footer">
    <p>Add<u>ition</u>al</p>
</div>

另一种选择包括使用.footer p :before和/或:after伪元素......

Answer 4

它应该像你需要的那样工作

footer p
{
  width: 50%;
}
footer p:after {
  content: '';
  border-bottom: 2px #000 solid;
  position: absolute;
  top:40px;
  left: 30px;
  width:100px;
}

https://jsfiddle.net/74zgg81d/1/

Answer 5

最好的方法是使用 css 伪元素::after 。此外，您还必须将display: inline-block和position: relative设置为p元素。

请参阅以下片段：

.footer p {
  display: inline-block;
  position: relative;
}
.footer p::after {
  content: "";
  width: 60px;
  height: 3px;
  background: black;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -3px;
}

<div class="footer">
  <p>ADDITIONAL INFO</p>
</div>