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

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

在文本下面居中一条小线

3 个答案: