Question

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

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

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

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

Answer 1

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 2

你可以使用:: after伪元素。如果你不知道伪元素是什么我推荐你learn about them here，因为它是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 psuedo元素......

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>

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

5 个答案: