Cara Membuat Link Navigasi Border Bawah

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari November 29, 2020

Pelajari cara membuat tautan navigasi batas bawah (garis bawah) dengan CSS.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #f1f1f1;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  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;
}
</style>
</head>
<body>

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

<div style="padding-left:16px">
  <h2>Border Link</h2>
  <p>Arahkan kursor ke atas link.</p>
</div>

</body>
</html>

Section Artikel

1 Buat Menu Navigasi
- 1.1 Langkah 1) Tambahkan HTML
- 1.2 Langkah 2) Tambahkan CSS

Buat Menu Navigasi

Langkah 1) Tambahkan HTML

Contoh:

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

Langkah 2) Tambahkan CSS

Contoh:

/* Tambahkan warna background hitam ke navigasi atas */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Beri style link di dalam bar navigasi */
.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;
}

How To