CODEWITHSUNDEEP
htmlcss
nmart
nmart

Reputation: 65

How to get links to underline when hover

I want to make my nav links underline when I hover over them. I'm hoping that I can make the Contact, Sign In, Bonds, Report a Claim, About Us, and Search become underlined when I hover over them. I tried messing around with it in CSS but nothing I do seems to work. Can anyone help me figure out how to make that happen?

body {
  margin: 0;
  padding: 0;
  font-family: "Open+Sans", sans-serif;
}

.navbar {
  border-bottom: 2px solid #0C133C;
}

#nav {
  background-color: #fff;
  color: white;
  width: 100%;
}

.nav {
  float: right;
  text-align: left;
  margin: 0;
}

.nav>li {
  display: Inline-block;
  padding: 20px 50px 10px 9px;
}

.nav>li a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  border-bottom: 3px solid transparent;
}

.clearer {
  clear: both;
}

.subnav class {
  margin: 0;
  position: relative;
}

.subnav>div a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  padding: 20px 30px 10px 9px;
}

.logo {
  margin-top: 1rem;
}

.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
}

.flex-container {
  display: flex;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Navbar</title>
<link rel="stylesheet" href=https://kit.fontawesome.com/f04ec83bb3.js" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css" </head>

  <body>

    <div class="navbar">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Sign In</a>
        </li>
      </ul>
      <div class="clearer"></div>
    </div>


    <subnav class="subnav subnav-light bg-light">
      <img src="universallogo.jpg" class="logo" />
      <div class="container-fluid">
        <a class="subnav=brand" href="#">
          <a class="nav-link active" aria-current="page" href="#">Bonds</a>
        </a>
        <a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
        <a class="nav-link active" aria-current="page" href="#">About Us</a>
        <a class="nav-link active" aria-current="page" href="#">Search</a>
      </div>
       </body>

</html>

Upvotes: 0

Views: 2650

Answers (6)

Mario Perez
Mario Perez

Reputation: 3367

add the :hover pseudo class to your class and then use the underline attribute for text-decoration, for example:

.class:hover {
  text-decoration: underline;
}

Upvotes: 1

jordan wilfry
jordan wilfry

Reputation: 33

In your css add

a:hover{text-decoration: underline;}

Upvotes: 0

Tomi
Tomi

Reputation: 39

The way to do this is by adding text-decoration: underline; to the hover state of the element you want to add this effect to. You can use the text-underline-offset property to increase/decrease the distance between the text and the line. You could also define a bottom border on the hover state of the element if you don't want the line being overlapped by downward extending letters (e.g. g, p), but I'll recommend the first option.

Upvotes: 1

DCR
DCR

Reputation: 15665

body {
  margin: 0;
  padding: 0;
  font-family: "Open+Sans", sans-serif;
}

.navbar {
  border-bottom: 2px solid #0C133C;
}

#nav {
  background-color: #fff;
  color: white;
  width: 100%;
}

.nav {
  float: right;
  text-align: left;
  margin: 0;
}

.nav>li {
  display: Inline-block;
  padding: 20px 50px 10px 9px;
}

.nav>li a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  border-bottom: 3px solid transparent;
}

.clearer {
  clear: both;
}

.subnav class {
  margin: 0;
  position: relative;
}

.subnav>div a {
  text-decoration: none;
  color: #0C133C;
  font-size: 18px;
  padding: 20px 30px 10px 9px;
}

.logo {
  margin-top: 1rem;
}

.subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 1rem;
}

.flex-container {
  display: flex;
}

a:hover{
text-decoration:underline!important;}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Navbar</title>
<link rel="stylesheet" href=https://kit.fontawesome.com/f04ec83bb3.js" crossorigin="anonymous">
  <link rel="stylesheet" href="styles.css" </head>

  <body>

    <div class="navbar">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Contact Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Sign In</a>
        </li>
      </ul>
      <div class="clearer"></div>
    </div>


    <subnav class="subnav subnav-light bg-light">
      <img src="universallogo.jpg" class="logo" />
      <div class="container-fluid">
        <a class="subnav=brand" href="#">
          <a class="nav-link active" aria-current="page" href="#">Bonds</a>
        </a>
        <a class="nav-link active" aria-current="page" href="#">Report a Claim</a>
        <a class="nav-link active" aria-current="page" href="#">About Us</a>
        <a class="nav-link active" aria-current="page" href="#">Search</a>
      </div>
       </body>

</html>

Upvotes: 0

sKaiCzar
sKaiCzar

Reputation: 64

simple solution would be to use

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

in the css.

Upvotes: 2

temo adeishvili
temo adeishvili

Reputation: 67

.class: hover{ text-decoration: underline; } will do. ".class" would be classes of those you want to make underline while hovering

Upvotes: 0

Related Questions