html 마우스오버 밑줄 (bootstrap 사용)

마우스가 올라갔을때 밑줄을 넣는 방법

 

.navbar-light .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.5);
  border-bottom: .15rem solid transparent;
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
  color: rgba(0, 0, 0, 0.7);
  border-bottom-color: rgba(0, 0, 0, 0.7);
}

 

bootstrap.css를 응용하였으며

 

기존의 navbar-light 밑의 navbar-nav의 밑의 nav-link에

 

border-bottom을 지정해 줍니다. (밑줄)

 

그리고 마우스 오버 즉 focus에 맞춰졌을때

 

해당 border-bottom-color의 값을 지정해준 색으로 바꿔줍니다.