Having difficulty achieving the hover transition effect

I've been working on a navbar design and I'm having trouble getting the hover effect to work on the links. Specifically, I am trying to add a transform property to the after element of the links but it doesn't seem to be taking effect.

#navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
.link-list {
      display: flex;
      gap: 2rem;
    }
    
.menu-link {
      color: var(--white);
      text-decoration: none;
      position: relative;
    }
    
.menu-link::after {   /*this is for the bottom border line which is 25% in length*/
      background: var(--white);
      content: "";
      width: 50%;
      height: 2px;
      position: absolute;
      left: 25%;
      bottom: -4px;
      transform: scaleX(0); /*i am adding transform 0 */
      transform-origin: center;
      transition: transform 500ms ease;
    }
    
.menu-link:hover .menu-link::after{ /* unable to get this effect on hover */
      transform: scaleX(1);
    }

Here are the link lists:

<section class="link-list">
   <a href="#" class="menu-link">About</a>
   <a href="#" class="menu-link">Careers</a>
   <a href="#" class="menu-link">Events</a>
   <a href="#" class="menu-link">Products</a>
   <a href="#" class="menu-link">Explore</a>
</section>
htmlcsshover

Answer №1

The definition of scale is the product of size and argument. scaleX(0) will result in *0, causing your element to disappear. scaleX(1) will result in *1, leaving your element unchanged. Use a number greater than 1 or less than 1 to achieve different effects.

#navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
.link-list {
      display: flex;
      gap: 2rem;
    }
    
.menu-link {
      color: var(--white);
      text-decoration: none;
      position: relative;
    }
    
.menu-link::after {   /*this creates a bottom border line that is 25% in length*/
      background: var(--white);
      content: "";
      width: 50%;
      height: 2px;
      position: absolute;
      left: 25%;
      bottom: -4px;
      transform: scaleX(0); /*setting initial transformation to 0 */
      transform-origin: center;
      transition: transform 500ms ease;
    }
    
.menu-link:hover .menu-link::after{ /*hover effect for expanding the bottom border */
      transform: scaleX(1);
    }

        

"<section class="link-list">
              <a href="#" class="menu-link">About</a
              ><a href="#" class="menu-link">Careers</a
              ><a href="#" class="menu-link">Events</a
              ><a href="#" class="menu-link">Products</a
              ><a href="#" class="menu-link">Explore</a>
            </section>"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Various objects are becoming engaged and chosen instead of a single item being focused on

In my React application, I have integrated a searchable Semantic UI dropdown. The issue I am encountering is that when I select an item by typing in the search field, the element matching the search text gets the class "active" and the element at the index ...

htmlcssreactjsreact-reduxsemantic-ui-react

Ways to align text in the middle and shift it downward?

I'm currently attempting to center the bottom navigation bar using the following CSS code: #main-nav { margin-left: auto; margin-right: auto;} Unfortunately, this method is not achieving the desired result. I even tried adding <center></cen ...

htmlcssalignmentblockcenter

What is the best way to effectively incorporate Bootstrap into an HTML project?

Here is the code snippet I am working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name ...

pythonhtmldjangobootstrap-5

Steps for extracting HTML content from a beautiful soup object

My current situation involves a bs4 object listing: >>> listing <div class="listingHeader"> <h2> .... >>> type(listing) <class 'bs4.element.Tag'> I am aiming to retrieve the raw html as a string. Initially, ...

pythonhtmlbeautifulsouphtml-parsing

Leveraging python capabilities within html documents

English is not my first language, so please excuse any spelling errors. I am working on combining HTML and Python to develop a graphical user interface (GUI) that can communicate with a bus system (specifically KNX bus). Currently, I have a Raspberry Pi ...

javascriptpythonhtmlbusknx

React element featuring various interfaces

Currently, I am working on styling a React component in a way that allows for either horizontal or vertical styling without using flexbox. My question is, how can I pass styles down to the component in a way that applies individual styles to the child ele ...

cssreactjs

Optimizing web content for iOS Safari with min-height media queries

I'm currently working on a Bootstrap-based photo browser that needs to have a responsive 4:3 aspect ratio. To achieve this, I have implemented the following approach: #carousel { width: 320px; height: 240px; ... } Additionally, I utilize media ...

cssios

An error was encountered at line 52 in the book-list component: TypeError - The 'books' properties are undefined. This project was built using Angular

After attempting several methods, I am struggling to display the books in the desired format. My objective is to showcase products within a specific category, such as: http://localhost:4200/books/category/1. Initially, it worked without specifying a catego ...

htmlangularspringtypescript

What is the best way to ensure that images appear in a square format?

Lately, I've been experimenting with the alpha version of bootstrap 4 for a project. No matter how hard I try, I can't seem to get uploaded images of different sizes to display as squares when displayed. Do you remember how Instagram used to onl ...

cssimagetwitter-bootstraptwitter-bootstrap-4

Implementing Content-Security-Policy for a web application embedded in an iframe

Hey there! I've got this cool webapp called myApp, developed using Spring Boot and Vaadin. It's going to be deployed on a Tomcat server at http://tomcatserver:8080/myApp Now, what I want to do is display the webapp in an iframe like this: <if ...

javascripthtmlspringiframecontent-security-policy

Animate the leftward disappearance of a div to make it vanish

My goal is to create a user interface where users can navigate through different divs. Here is the HTML code: <article id="realize" class="realizeBox"> <div class="shown"> <div class="heading"> <h2>Realisati ...

javascriptjqueryhtmlcssjquery-animate

The entire space on an HTML page should be occupied with content from the header to the footer

I am currently implementing jQuery Mobile on my project. The page I have created consists of a fixed header and footer with only two buttons. Due to the fixed footer, half of the page is in silver color (data-theme=c) while the bottom half is gray. My goa ...

jqueryhtmljquery-mobile

What is the source of these additional pixels that appear when percentages are used for defining height?

I have been working on implementing a sticky footer that I've successfully used in the past for various websites. You can find the link to the original method here: However, this time I am facing a challenge as I want to make the footer more responsi ...

cssresponsive-designsticky-footer

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

javascripthtmlcss

The PDF format is experiencing compatibility issues when used with the CSS property for page breaks after:

My PDF with CSS page breaks is not functioning properly, as the pages are not breaking as intended. Removing position:absolute solves the issue but leaves space after each page. I suspect it may be a CSS problem, but I'm unsure. If the issue lies wit ...

javascripthtmlcsspdfphantomjs

The information is not appearing in the dropdown menu

The select tag for chapters is not displaying the result from the query properly. Instead of showing in the select tag, the chapter names are being displayed as echo statements. <!doctype html> <html> <head> <meta charset="utf-8"> ...

javascriptphphtmlsqlselect

Having a problem with the glitch effect in Javascript - the text is oversized. Any tips on how to resize

I found some interesting code on the internet that creates a glitch text effect. However, when I implement it, the text appears too large for my webpage. I'm struggling to adjust the size. Here is the current display of the text: too big This is how ...

javascriptjqueryhtmlcss

Having trouble getting the HTML input textbox onChange event to fire properly?

This is the code I have been working on: <script language="JavaScript"> function toggle() { if (this.value=='1') { document.getElementById('dbOn').style.visibility='visible'; } el ...

javascripthtmltextboxonchange

"Showcase a Pair of Images with Just a Single Click. Leveraging PHP and

With two div boxes, one for Input and the other for Output as displayed below: https://i.sstatic.net/C8dhm.png My goal is to upload an image using PHP and store it in both the Input and Output folders. Upon clicking the Submit button, I want the image f ...

phpjqueryhtmlajaxfile-upload

What are the steps to create a hovering dropdown menu that changes the background window to transparent when hovered over?

Is there a way to create a dropdown menu that changes the background window to transparent when hovered over? Here is an example of what I am looking for: https://i.sstatic.net/FplLm.png The dropdown menu should look like this when hovered over: https: ...

htmlcss