Question 186018 in Html Question posted in
Some basic documentation can be found here.

Html – Underlining text in navbar

I want to try and underline the text of a navbar but the underline animation doesn’t work.

this is my css for the underlining

.navbar {
    overflow: hidden; 
    background-color: #333; 
}
  
.navbar a {
    float: left; 
    display: block; 
    color: #dd5527; 
    text-align: center; 
    padding: 14px 20px; 
    text-decoration: none; 
}

.navbar a:after {
    content: "";
    position: absolute;
    background-color: #dd5527;
    height: 3px;
    width: 0;
    left: 0;
    bottom: -10px;
    transition: 0.3s;
}

.navbar a:hover::after {
    width: 100%;
}

this is my html for the navbar

<div class="navbar">
    <a class="nav-link nav-link-ltr" href="#">Home</a>
    <a class="nav-link nav-link-ltr" href="#">About Us</a>
    <a class="nav-link nav-link-ltr" href="#">Services</a>
</div>
Tags:

2

Answers


  1. 0

    It is working: your element is just rendered at the wrong place. You need to:

    • add position: relative to the <a> element, and
    • use 0 or a positive pixel value for the pseudo-element’s bottom property so that it is not cut-off by overflow: hidden set on the parent container
    .navbar {
  overflow: hidden; 
  background-color: #333;
}

.navbar a {
  position: relative; /* Fix */
  float: left;
  display: block;
  color: #dd5527;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.navbar a:after {
  content: "";
  position: absolute;
  background-color: #dd5527;
  height: 3px;
  width: 0;
  left: 0;
  bottom: 0; /* Fix */
  transition: 0.3s;
}

.navbar a:hover::after {
  width: 100%;
}
    <div class="navbar">
  <a class="nav-link nav-link-ltr" href="#">Home</a>
  <a class="nav-link nav-link-ltr" href="#">About Us</a>
  <a class="nav-link nav-link-ltr" href="#">Services</a>
</div>
    Login or Signup to reply.
  2. 0

    Use the transform:scale(0) to set the initial scale and then set transform-origin:left; to transform from left to right. then use the transition:transform 350ms ease-in; to get the transition animation and finally set the transform:scale(1) on a:hover::after to scale back to original size. I have also set some styling for the underline and a tag. I would suggest you use display:flex; on navbar instead of float:left on a tag.

    .navbar {
  background-color: #333;
  overflow: hidden;
}

.nav-link {
  position: relative;
  display: block;
  float: left;
  padding: 15px 5px;
  margin-right: 30px;
  color: #dd5527;
  text-align: center;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  background-color: #dd5527;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 10px;
  transform: scale(0);
  transition: transform 450ms ease-in;
  transform-origin: left;
}

.nav-link:hover::after {
  transform: scale(1);
}
    <div class="navbar">
  <a class="nav-link nav-link-ltr" href="#">Home</a>
  <a class="nav-link nav-link-ltr" href="#">About Us</a>
  <a class="nav-link nav-link-ltr" href="#">Services</a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search