html - 在文本下方居中一条小线

Question

我想在我的文字下面加一条线，但又不想完全下划线。一条比文本小的线，位于下方居中。 我的文本在一个 div 中并右对齐，如果我将线向右移动，我可以将它居中放置在文本下方，但问题是文本可以有不同的大小。

Here are some things i have tried

我需要的是这样的:

      menu
       _
  longmenu
      _
     menus
       _

希望有人能帮忙。

Answer 1

由于您有 CSS3 标签，这里是从您的示例中提取的 CSS3 选项:

.text{
  position: relative;
  text-align: right;
  float: right;
  clear: right;
}
    
.text::after {
  content: "";
  position: absolute;
  border-top: 1px solid black;
  left: 35%;
  bottom: 0;
  width: 30%;
  height: 0px;
}

<div>
  <p class="text">test 2 small</p>
  <p class="text">test test 2 large</p>
  <p class="text">test 2 small</p>
  <p class="text">test test 2 large</p>
</div>

或者如果您更喜欢固定宽度的线:

.text::after {
  content: "";
  position: absolute;
  border-top: 1px solid black;
  left: 50%;
  bottom: 0;
  margin-left: -15px;
  width: 30px;
  height: 0px;
}