Question

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

上线会自动调整文字的宽度，但是如果可能的话，我会尽量使文字比文字更长。下面是我想要实现的一个例子：

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

如果你能提供帮助我会非常感激

谢谢

Answer 1

首先为文本创建一个div，它将成为装饰

for explample

<div id="content"><p>your text<p></div>

之后用css填充div的宽度并放置边框：

#content{ border: solid 1px black; width:200px;}

我认为这可以提供帮助。

Answer 2

将文本换行到<div>标记（或者如果任何其他元素已经包装它，您可以使用它），然后为其设置border-top。顶部边框的宽度将是div的宽度。

HTML：

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

CSS：

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

Answer 3

这将为您提供一个起点

nav ul li{
    display:inline;
    border-right: 1px solid black;
}

FIDDLE

我添加了一个最后一个：孩子，这样你就没有剩下的右边界了

Answer 4

这可以提供帮助吗

HTML：

<a href="#"><p>Home</p></a>
<a href="#"><p>Page One</p></a>
<a href="#"><p>Page Two</p></a>
<a href="#"><p>The Last Page</p></a>

CSS：

p {
    padding-top:20px;
    width:150px;
    text-align:center;
    display:inline-block;
    border-top:#FFF thick solid;
}

p:hover {
    border-top:#F00 thick solid;
}

铅

如何更长时间地覆盖文字？

4 个答案: