CODEWITHSUNDEEP
csstwitter-bootstrap
Antrikshy
Antrikshy

Reputation: 3106

How can I add an underline with a custom color to a link in a Bootstrap navbar?

This is what I am trying to make.

enter image description here

In case it's not clear, the black navbar link has a purple underline. What would be a nice way to add such a thing to a link in Bootstrap's navbar? Should I squeeze in a div under the link? Any other ideas? Is something with box shadows possible?

Upvotes: 0

Views: 1080

Answers (3)

user3828351
user3828351

Reputation: 21

.navbar ul li a{border-bottom:1px solid #000;} You can set the with of this border too if needed.

Upvotes: 0

Anjula Ranasinghe
Anjula Ranasinghe

Reputation: 584

IS this the answer you looked for?

<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

Upvotes: 2

davidcondrey
davidcondrey

Reputation: 35983

ul {
  list-style:none;
  }
li {
  display:inline-block;
  }
li:nth-child(2) {
  border-bottom:2px solid purple;
  }
<ul>
  <li>One</li>
  <li>two</li>
  <li>three</li>
</ul>

or 

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;
}
<ul>
  <li>One</li>
  <li>two</li>
  <li>Three</li>
</ul>

Upvotes: 1

Related Questions