CODEWITHSUNDEEP
htmlcssunderline
Anton Rand
Anton Rand

Reputation: 342

CSS Underline Hover - Why is padding underlined?

I'm designing a navbar for my website and I want the links to be underlined on hover. Why does the underline CSS rule apply to the nav-section class?

How can I stop the padding from being underlined?

Please see attached code below...

body {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 24px;
  color: #424242;
}

.title {
  float: left;
  padding: 10px;
  font-size: 30px;

}

.nav-section {
  color: #757575;
  float: left;
  padding-top: 16px;
  padding-right: 15px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.nav-section:hover {
  color: #616161
}


.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #616161;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
<div class="title">Title</div>
<div class="nav-section">
  <a class="nav-link">Link 1</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 2</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 3</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 4</a>
</div>

Upvotes: 0

Views: 765

Answers (1)

Daniel A. White
Daniel A. White

Reputation: 190943

padding is used to increase an element's size. You should use margin-right and margin-top to create the required separation.

body {
  font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 24px;
  color: #424242;
}

.title {
  float: left;
  padding: 10px;
  font-size: 30px;

}

.nav-section {
  color: #757575;
  float: left;
  margin-top: 16px;
  margin-right: 15px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

.nav-section:hover {
  color: #616161
}


.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #616161;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}


.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
<div class="title">Title</div>
<div class="nav-section">
  <a class="nav-link">Link 1</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 2</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 3</a>
</div>
<div class="nav-section">
  <a class="nav-link">Link 4</a>
</div>

Upvotes: 3

Related Questions