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

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

Answer 2

你可以把你的文本放在一个<span>. 将<span>与文本一样宽。然后你在 Photoshop 或其他东西中画一条小线并将其放在背景上。

HTML：

<span class="underlined">text</span>

CSS：

.underlined {
     background: url(line.gif) center bottom no-repeat;
}

Answer 3

可以使用 HTML 和 CSS 来实现效果：

HTML：

<span id="example">menu</span>

CSS：

example {
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 5px;
    }

example:hover {
    background: url(line1x50.gif) repeat-x 100% 100%;
    }

您可以定义图像宽度，它将是您想要的大小。