在文本下方居中一小行

Question

我想在我的文本下划一条线，但不要完全强调它。比文本小且居中的行。我的文本在一个 div 内并右对齐，如果我将线向右移动，我可以将它放在文本下方的中心，但问题是文本可以有不同的大小。

这是我尝试过的一些事情

我需要的是这样的：

      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;
}