如何将自定义颜色的下划线添加到Bootstrap导航栏中的链接？

Question

这就是我想要做的。

如果不清楚，黑色导航栏链接有一个紫色下划线。将这样的东西添加到Bootstrap导航栏中的链接会有什么好方法？我应该在链接下挤一个div吗？还有其他想法吗？盒子阴影有可能吗？

Answer 1

这是您寻找的答案吗？

<ul>
  <li>Blog</li>
  <li>Jobs</li>
  <li>Contact</li>
</ul>

CSS：

li {
    display:inline-block;
    padding:10px; 
    font-family:arial; 
  }

li:hover {
  border-bottom:1px solid purple;
  }

Fiddle Example

Answer 2

＆＃13;

＆＃13;

ul {
  list-style:none;
  }
li {
  display:inline-block;
  }
li:nth-child(2) {
  border-bottom:2px solid purple;
  }

＆＃13;

<ul>
  <li>One</li>
  <li>two</li>
  <li>three</li>
</ul>
  

＆＃13;

＆＃13;

＆＃13;

或

＆＃13;

＆＃13;

ul {
  list-style: none;
}
li {
  display: inline-block;
  width: 120px;
  position: relative;
}
li:nth-child(2):after {
  content: '\A';
 height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  background: purple;
}

＆＃13;

<ul>
  <li>One</li>
  <li>two</li>
  <li>Three</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.navbar ul li a {border-bottom：1px solid＃000;} 如果需要，您也可以设置此边框的使用。