하단에 테두리가 있는 네비게이션 링크 생성 방법

CSS를 사용하여 하단에 테두리가 있는 (밑줄) 네비게이션 링크를 만들어보세요.

네비게이션 메뉴 생성

第一步 - HTML 추가하기：

<div class="topnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

第二步 - CSS 추가하기：

/* 푸른 상단 네비게이션 바에 검은 배경색 추가 */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* 설정 네비게이션 바 중 링크 스타일 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}
.topnav a:hover {
  border-bottom: 3px solid red;
}
.topnav a.active {
  border-bottom: 3px solid red;
}

본인이 직접 시도해 보세요

관련 페이지

教程：응답형 상단 네비게이션 바를 어떻게 생성할 수 있습니까?

教程：CSS 네비게이션 바