Bucky Thomas Bucky Thomas - 5 months ago 11
HTML Question

How to make a underline of a <a> tag change color when hovering over it

How can I change the colour of underline of a

<a>
tag when hovering over it?

I done some research and as you cannot directly change the colour of the line you can use the -
border-bottom
option, I have tried this but when I open it in chrome nothing happens when hovering over it.



.nav-main {
width:100%;
background-color: #222;
height:70px;
color:#fff;
display:flex;
justify-content: center;
}

.nav-main > ul {
margin:0;
float:left;
list-style-type: none;
}

.nav-main > ul > li {
float:left;
padding-left: 10px;
}

.nav-item {
display:inline-block;
padding:15px 20px;
height:40px;
line-height:40px;
color:#fff;
text-decoration:none;
}

.nav-item:hover {
border-bottom-color: #00cc00;
}

<nav class="nav-main" id="navMain">
<ul>
<li>
<a href="#" class="nav-item"> HOME</a>
</li>
<li>
<a href="#" class="nav-item">ABOUT US </a>
</li>
<li>
<a href="#" class="nav-item">PORTFOLIO </a>
</li>
<li>
<a href="#" class="nav-item">SERVICES </a>
</li>
<li>
<a href="#" class="nav-item">CONTACT US </a>
</li>
</ul>
</nav>





JS FIDDLE

http://jsfiddle.net/dgc4q/42/

Answer

When you set border-bottom-color the browser assome that you defined the rest of the border's properties (type and width). You didn't do it.

So, you need to change

border-bottom-color: #00cc00;

to

border-bottom: 1px solid #00cc00;

Live:

.nav-main {
  width:100%;
  background-color: #222;
  height:70px;
  color:#fff;
  display:flex;
  justify-content: center;
}

.nav-main > ul {
  margin:0;
  float:left;
  list-style-type: none;
}

.nav-main > ul > li {
  float:left;
  padding-left: 10px;
}

.nav-item {
  display:inline-block;
  padding:15px 20px;
  height:40px;
  line-height:40px;
  color:#fff;
  text-decoration:none;   
}

.nav-item:hover {
  border-bottom: 1px solid #00cc00;
}
<nav class="nav-main" id="navMain">
  <ul>
    <li>
      <a href="#" class="nav-item"> HOME</a>                              
    </li>
    <li>
      <a href="#" class="nav-item">ABOUT US </a>
    </li>
    <li>
      <a href="#" class="nav-item">PORTFOLIO </a>
    </li>
    <li>
      <a href="#" class="nav-item">SERVICES </a>
    </li>
    <li>
      <a href="#" class="nav-item">CONTACT US </a>
    </li>
  </ul>
</nav>

Comments