Html 如何在CSS中向导航栏添加自定义行

目前正在尝试添加一个很酷的设计线，如

到我的自定义导航栏的底部。你想怎么添加这样的内容？是否有一种方法可以将其添加到导航栏的css中，而不是将其作为图像拉入？差不多

主要是：

width:auto
border-top:1 px solid #000000;
border-radius:3px;

---

你可以这样做

background:url('image_url');
background-repeat: no-repeat;
background-position: bottom center;
padding-bottom: 10px;
margin:  10px 0px  10px 0px;

---

或者使用边框图像（即可以是ISSUE），如果您可以用小提琴提供html/STLE，可以建议解决方案

尝试水平规则和字体组合。把中间的图标改成你想要的任何东西。< /P>

hr{
边界：0；
高度：2倍；
利润率：18px0；
位置：相对位置；
背景：-moz线性梯度（左，rgba（0,0,0,0）0%，rgba（0,0,0,0）10%，rgba（0,0,0,0.65）50%，rgba（0,0,0,0）90%，rgba（0,0,0,0）100%）/*FF3.6+*/
背景：-webkit渐变（线性，左上，右上，颜色停止（0%，rgba（0,0,0,0）），颜色停止（10%，rgba（0,0,0,0）），颜色停止（50%，rgba（0,0,0,0.65）），颜色停止（90%，rgba（0,0,0,0,0）），颜色停止（100%，rgba（0,0,0））；/*铬，Safari4+*/
背景：-webkit线性梯度（左，rgba（0,0,0,0）0%，rgba（0,0,0,0）10%，rgba（0,0,0,0.65）50%，rgba（0,0,0,0）90%，rgba（0,0,0,0）100%）/*铬10+，Safari5.1+*/
背景：-o-线性梯度（左，rgba（0,0,0,0）0%，rgba（0,0,0,0）10%，rgba（0,0,0,0.65）50%，rgba（0,0,0,0）90%，rgba（0,0,0,0）100%）/*Opera 11.10+*/
背景：-ms线性梯度（左，rgba（0,0,0,0）0%，rgba（0,0,0,0）10%，rgba（0,0,0,0.65）50%，rgba（0,0,0,0）90%，rgba（0,0,0,0）100%）/*IE10+*/
背景：线性梯度（左，rgba（0,0,0,0）0%，rgba（0,0,0,0）10%，rgba（0,0,0,0.65）50%，rgba（0,0,0,0）90%，rgba（0,0,0,0）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00000000'，endColorstr='#00000000'，GradientType=1）；/*IE6-9*/
边缘顶部：60像素；
}
人事：以前{
内容：“；
显示：块；
边框顶部：实心1px#f9f9f9；
宽度：100%；
高度：1px；
位置：相对位置；
最高：50%；
z指数：1；
}
hr:在{
内容：“\f1ce”；
位置：绝对位置；
字体系列：Fontsome；
宽度：30px；
文本对齐：居中；
顶部：-8px；
左：48%；
z指数：9999999；
背景色：白色；
颜色：#666；
}

with:after属性 我不知道您的导航栏是什么样子，但您可以通过在菜单中添加

:after

属性

来获得所需的效果

下面是使用您的图像的示例：

菜单{
位置：相对位置；
}
.菜单：之后{
内容：网址(http://forrester-park.co.uk/wp-content/uploads/2014/05/Fancy-line.png);
显示：块；
背景：白色；
位置：绝对位置；
}

一些头衔

菜单项1
菜单项2
菜单项3
菜单项4

您只需在该站点上获取F12，然后查看应用的样式，然后创建JSFIDLE或工作演示code@Himesh这看起来不像是直接在我的导航栏中实现的。这只是一个图像，而不是代码。你可以用CSS创建一行（这很简单），然后你需要一个小卷曲的图像-这有两个选择：直接使用img（例如，

background image

或您可以使用icont。我建议使用带有许多图标的无页面库，或者您可以创建自己的库，也可以将图像转换为css@areim我可以喜欢Borderbottom:url（“something.com”）吗添加了JSFIDLE链接，但此代码只会使我的导航栏更高，但图像不会随边框调整大小。是否要将图像作为一个整体进行缩放，或仅扩展图像侧面的线条长度？如果是，使用

的解决方案可能更合适。我希望它与顶部导航栏一起使用