如何居中和改变下划线的长度？答案

【问题标题】：How to center and change the length of underline?如何居中和改变下划线的长度？
【发布时间】：2017-10-22 13:12:28
【问题描述】：

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

我创建了fiddle，我希望下划线居中，如image 所示。

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

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

【问题讨论】：

::after 伪元素是否可用于此？
请将所有相关代码包含在问题本身中，而不是在外部网站上作为minimal reproducible example。
为什么您的页脚段落设置为50% 宽度？我觉得我们需要看到更多才能确定一个好的解决方案。
另外，中间的多少应该加下划线？它是单词本身的一半，还是设置为3em 或附近的固定宽度？
@Mr Lister 我没有在该代码中的伪元素之后使用 :: 。我不确定如何使用它。你能给我一点点指针吗？

标签： html css underline

【解决方案1】：

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

这是一种非常直截了当的方法

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

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

【讨论】：

【解决方案2】：

您可以使用 ::after 伪元素。如果你不知道什么是伪元素，我推荐你learn about them here，因为它是 CSS 的一个非常重要的部分，你会经常使用。 ::after 伪元素能够在某个元素之后添加内容。

你可以在 p 元素之后创建一个边框，例如：

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

【讨论】：

@MrLister 感谢您指出这一点，我的错误。我用正确的措辞更正了我的回答。

【解决方案3】：

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

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/

【讨论】：

【解决方案4】：

您可以使用带有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>

【讨论】：

【解决方案5】：

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

请看下面的sn-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>

【讨论】：