html - 如何使上划线文本装饰更长？

Question

我在导航栏上工作，在为文本创建自定义上划线效果时遇到了一些问题。我想出了如何使上划线文本装饰更粗，但我想弄清楚如何让它更长。

上划线会根据文本的长度自动调整其宽度，但如果可能的话，我会尝试使线条比文本长。以下是我要实现的目标的示例:

http://outsidethelp.wix.com/otlclothing#!home/mainPage

如果你能帮上忙，我将不胜感激

谢谢

Answer 1

将您的文本包裹在 <div> 中标签(或者如果任何其他元素已经包装它，您可以使用它)，然后设置 border-top为了它。上边框的宽度将是 div 的宽度。

HTML:

<div class="overline">
    <span>text text text<span>
</div>

CSS:

.overline {
    width: 100px;
    border-top: 2px solid black;
}