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

Html – adding a line under words with transition but it wont transition with width

im very confused and have looked everywhere, im on the newest version of chrome and it should work. i just want it to transition left to right when hovered over. the line shows up when hovered but not transitioned. just note im not the best at coding just messing around.

.about {
  height: 50px;
  width: 200px;
  text-align: center;
}
.about:hover::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  transform: scaleX(0);
  /* Initially hidden */
  transition: width .5s;
  /* Smooth transition on hover */
  display: block;

}

.about:hover::before {
  width: 100%;
  transform: scaleX(1);
  /* Expand on hover */
  transition: all .5s;
}
<div class="about">About</div>
Tags:

3

Answers


  1. 0

    The issue with your code is due to conflicting properties and incorrect initial state setup for the ::before pseudo-element. Here’s the corrected and simplified code that ensures the underline transitions smoothly from left to right when hovered

    .about {
    position: relative; /* Ensures ::before is positioned relative to the element */
}

.about::before {
    content: ''; 
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Line starts with no width */
    height: 2px;
    background-color: blue; /* The color of the underline */
    transition: width 0.5s ease; /* Smooth transition of width */
}

.about:hover::before {
    width: 100%; /* Expands the line fully on hover */
}

    Key Changes:

    1. Initial State (width: 0): The line starts with zero width, making it invisible initially.

    2. Hover State (width: 100%): On hover, the width grows smoothly to full width.
      transition: width 0.5s ease;: This ensures a smooth animation for the width change.
      Removed transform: scaleX: Using width alone simplifies the animation and avoids redundancy.

    3. position: relative: Ensures the ::before pseudo-element is positioned relative to the .about element.

    Login or Signup to reply.
  2. 0

    The main issue is you made the pseudo element exists only when hovering, so the animation won’t play because there’s nothing to animate when it’s not hovered.

    Here’s the improved version:

    .about {
  /* make sure the pseudo element uses its dimentions */
  position: relative;    
  display: inline-block;
}

/* make sure the pseudo element persists without hovering */
.about::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  
  /* starting point with scale of 0 */
  transform: scaleX(0);
  /* make sure the animation start from left to right */
  transform-origin: left;
  /* animate its transform */
  transition: transform .5s;
}

/* when hovering, only overwrite the changed value */
.about:hover::before {
  transform: scaleX(1);
}
    <div class="about">Lorem Ipsum</div>
    Login or Signup to reply.
  3. 0

    A few additions needed.

    The div itself needs to be positioned so the before picks up its width from that rather than from the next closest positioned ancestor.

    The transition needs to start at the left so transition-origin needs to be set, otherwise it defaults to center.

    The transition is not on the width – you are not altering that – but on the transform which is doing the scaling.

    .about {
  position: relative;
  width: fit-content;
}

.about::before {
  content: 'A';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: blue;
  transform: scaleX(0);
  /* Initially hidden */
  transition: transform .5s;
  /* Smooth transition on hover */
  display: block;
  transform-origin: left center;
}

.about:hover::before {
  transform: scaleX(1);
  /* Expand on hover */
}
    <div class="about">About</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search