使用过渡元素时，如何更改下划线颜色？（CSS）

在我的网站上，我使用了一个模板来制作我的导航栏。我的目标是定制它，使它看起来像BBC导航栏。（链接： )在使用过渡元素时，是否有任何方法可以更改边框底部/下划线的颜色？如果是这样的话，你能修改一下代码，让它像BBC的菜单栏一样

谢谢D

代码：

身体{
字体系列：开放式SAN；
}
#cssmenu{
背景#f96e5b；
宽度：自动；
}
#cssmenu ul{
列表样式：无；
保证金：0；
填充：0；
线高：1；
显示：块；
缩放：1；
}
#cssmenu ul：之后{
内容：“；
显示：块；
字号：0；
身高：0；
明确：两者皆有；
可见性：隐藏；
}
#cssmenu ul li{
显示：内联块；
填充：0；
保证金：0；
}
#cssmenu.align-right ul li{
浮动：对；
}
#cssmenu.align-center ul{
文本对齐：居中；
}
#cssmenu ul li a{
颜色：#ffffff；
文字装饰：无；
显示：块；
填充：15px 25px；
字体系列：“开放式Sans”，无衬线；
字号：700；
文本转换：大写；
字体大小：14px；
位置：相对位置；
-webkit转换：彩色.25s；
-moz过渡：彩色.25s；
-ms转换：彩色。25s；
-o-过渡：彩色。25s；
过渡：颜色。25s；
}
#cssmenu ul li a:悬停{
颜色：#00ff00；
}
#cssmenu ul li a:悬停：之前{
宽度：100%；
}
#cssmenu ul li a:之后{
内容：“；
显示：块；
位置：绝对位置；
右：-3px；
顶部：19px；
高度：6px；
宽度：6px；
背景：#ffffff；
不透明度：.5；
}
#cssmenu ul li a:之前{
内容：“；
显示：块；
位置：绝对位置；
左：0；
底部：0；
高度：3倍；
宽度：0；
背景:#333333；
-webkit过渡：宽度为0.25s；
-moz过渡：宽度为0.25s；
-ms过渡：宽度为0.25s；
-o型过渡：宽度为25s；
过渡：宽度为0.25s；
}
#最后一次，
#cssmenu ul li:最后一个孩子>a:之后{
显示：无；
}
#cssmenu ul li.主动a{
颜色：#333333；
}
#cssmenu ul li.主动a:之前{
宽度：100%；
}
#cssmenu.align-right li.last>a:之后，
#cssmenu.align-right li:最后一个子项>a:之后{
显示：块；
}
#cssmenu.align-right li:第一个子项a:之后{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：768px）{
#cssmenu ul li{
浮动：无；
显示：块；
}
#cssmenu ul li a{
宽度：100%；
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
边框底部：1px实心#fb998c；
}
#cssmenu ul li.last>a，
#cssmenu ul li：最后一个孩子>a{
边界：0；
}
#cssmenu ul li a:之后{
显示：无；
}
#cssmenu ul li a:之前{
显示：无；
}
}
.dateOfPost{
字体大小：粗体；
文字装饰：下划线；
}
张瑞安的博客
张瑞安的博客
















网站上线

上传日期：

25/10/15


哇！该网站现在是活的

停留时间：

亲切的话语，

有趣的帖子，

有用的文章

还有很酷的事实



-瑞安

您是否考虑过将它们应用于属性

边框底部：Xpx solid#yourColor

---

我真的不明白你的意思，否则就做一个截图：）

他们给每一个李都上了自己的课

最简单的方法是给每一个li指定一个与背景颜色匹配的边框底部

然后在悬停状态下，只需更改特定li的“边框颜色”属性

像这样：

<ul>
  <li class="one">Lorem</li>
  <li class="two">Lorem</li>
  <li class="three">Lorem</li>
  <li class="four">Lorem</li>
  <li class="five">Lorem</li>
  <li class="six">Lorem</li>
</ul> 

li{
  border-bottom: 5px solid transparent;
}

.one:hover{border-color: dodgerblue;}
.two:hover{border-color: seagreen;}
.three:hover{border-color: skyblue;}
.four:hover{border-color: tomato;}
.five:hover{border-color: grey;}
.six:hover{border-color: white;}

洛雷姆
洛雷姆
洛伦
洛雷姆
洛伦
洛伦

李{
边框底部：5px实心透明；
}
.1:悬停{边框颜色：dodgerblue；}
.2：悬停{边框颜色：海绿；}
.3：悬停{边框颜色：天蓝色；}
.4：悬停{边框颜色：番茄；}
.5:悬停{边框颜色：灰色；}
.six:悬停{边框颜色：白色；}

---

原始底边颜色可以是透明的。那是平常的事method@Paulie_D是的，这是真的：）会改变的