"The CSS animation effect for underlining text does not seem to be

I'm trying to create a CSS animation using the transform property. Specifically, I want to have an underline animation when a link is hovered over. Strangely, the code that works in another HTML file is not working here. Although the links change color to white when hovered over, the transformation is not being displayed. Below is the HTML for the navigation bar and the relevant CSS:

ul {
  list-style-type: none;
}

li {
  display: inline;
}

li a {
  color: black;
  text-decoration: none;
}

.link:hover {
  color: white;
}

.link:before {
  content: "";
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
  background-color: #000;
}

.link:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
<nav>
  <ul>
    <li><a class="link" href="home.html">Home</a></li> -
    <li><a class="link" href="code.html">Code</a></li> -
    <li><a class="link" href="webpages.html">Webpages</a></li> -
    <li><a class="link" href="articles.html">Articles</a></li> -
    <li><a class="link" href="resume.html">Resume</a></li>
  </ul>
</nav>

htmlcsstransform

Answer №1

To achieve this effect, you will need to include additional CSS lines. Add the following lines to your .link:before selector:

position: absolute;
bottom: 0;
width: 100%;
height: 1px;

Make sure to specify the width, height, and positioning properties. Since the underline's position is absolute, the parent element must have a relative position. Therefore, add the following to the li selector:

position: relative;

Below is the complete code snippet:

ul {
  list-style-type: none;
}

li {
  display: inline;
  position: relative;
}

li a {
  color: black;
  text-decoration: none;
}

.link:hover {
  color: white;
}

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

.link:hover:before {
  visibility: visible;
  transform: scaleX(1);
}
<nav>
  <ul>
    <li><a class="link" href="home.html">Home</a></li> -
    <li><a class="link" href="code.html">Code</a></li> -
    <li><a class="link" href="webpages.html">Webpages</a></li> -
    <li><a class="link" href="articles.html">Articles</a></li> -
    <li><a class="link" href="resume.html">Resume</a></li>
  </ul>
</nav>

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

Prevent unnecessary image resizing during parallax scrolling animation

Check out my demonstration where the image scaling results in the margin-top of the parallax wrapper being unable to dynamically adjust. Demonstration: http://jsfiddle.net/KsdeX/12/ .wrapper-parallax { margin-top: 150px; margin-bottom: 60px; } W ...

javascripthtmlcssparallax

Using .float-right and .float-left within a .row in bootstrap 4 does not achieve the desired result

When using Bootstrap 4, the float property may not work as expected inside a row. I am trying to have the right div appear on the left and the left div appear on the right, but in responsive view I want the right div to be displayed before the left div. ...

htmlbootstrap-4css-float

Arrange list items dynamically using ajax

I am attempting to adjust the positioning of the scrollable list item depending on whether a message was sent by a user or another party. However, my current method is not yielding the desired results. I have experimented with adding .css('position&a ...

javascriptjqueryhtmlcssajax

Toggling the form's value to true upon displaying the popup

I have developed an HTML page that handles the creation of new users on my website. Once a user is successfully created, I want to display a pop-up message confirming their creation. Although everything works fine, I had to add the attribute "onsubmit= re ...

javascripthtmlcssforms

opinions on a product in angular from a user's perspective

user schema: var UserSchema = new Schema({ review_likes : [{type:String}], review_dislikes : [{type:String}] }); review schema: var ReviewSchema = new Schema({ productID:{type: String, required: true}, numoflikes:{type:Number, re ...

htmlangularjsnode.jsmean

Tips for customizing your MUI slider design

import * as React from "react"; import Box from "@mui/material/Box"; import Slider from "@mui/material/Slider"; function valuetext(value) { return `${value}°C`; } export default function RangeSlider() { const [value, se ...

javascriptcssreactjsmaterial-ui

Using Bootstrap to style the <option> element with RGBA colors

Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options. Select CSS: select { background-color: rgba(0,0,0,0.25) !important; border: 1px solid rgba ...

jqueryhtmlcsstwitter-bootstrap

Prevent jQuery from overriding CSS styling

Having an issue with adding a <p> tag before each jQuery accordion on my MVC page. No matter what I try, the jQuery styling keeps interfering with the classes and styles of my <p> tag. Is there a way to make it look like the other non-jQuery & ...

htmlcssrazor

Connect two radio buttons across separate forms

I am encountering an issue with two radio buttons that I am trying to link together. The problem arises because they are located in two separate form elements, causing them not to function as intended. It is important for the forms to be utilized in Bootst ...

javascripthtmlcsstwitter-bootstrapstyles

Incorporating a custom object into two dropdown menus using JavaScript

As a novice in the world of JavaScript, I am attempting to dynamically add values from a text box to two select boxes. Upon entering a value (node name), my goal is to include that name in both select boxes srcNodes and targetNodes. However, I'm enco ...

javascripthtml

"Every time the $_POST array is accessed, it consistently contains 48 to

In my PHP file, I am querying a database to retrieve a list of items and then generating an HTML table to display those items. Each table cell contains input elements within a form <form> <table> ... <td> & ...

phphtmlpostamazon-elastic-beanstalk

Tips for controlling the size of a canvas element: setting minimum and maximum width and height properties

function convertImageResolution(img) { var canvas = document.createElement("canvas"); if (img.width * img.height < 921600) { // Less than 480p canvas.width = 1920; canvas.height = 1080; } else if (img.width * img.he ...

javascripthtmlcss

Switching over from an external style sheet to inline elements can be tricky, especially when it comes to integrating "dropdown" styles properly

I successfully created a stylish menu using a specific style sheet, but now I'm facing issues when trying to incorporate this menu into web pages with different style requirements. Realizing that loading the style sheet onto these new pages wreaks hav ...

htmlcssinlinestylesheet

When hovering over items in the navigation bar, the entire bar expands seamlessly

I've spent countless hours trying to troubleshoot an issue with my dropdown menu that expands whenever I hover over it. The bar stretches out to accommodate the list of dropdown contents and then reverts back to normal when I move my cursor away. My a ...

javascripthtmljquerycsstwitter-bootstrap

When a DIV is clicked, trigger the fadein effect on another DIV; when the same DIV is clicked again, fade

I have a sliding panel on my webpage that reveals the navigation (www.helloarchie.blue). I want the content inside the panel to fade in slowly when it slides out, and then fade out when the user clicks the icon to close the panel. How can I achieve this ef ...

jqueryhtmlcssfadeinfadeout

Displaying a visual representation of time remaining with a countdown progress bar

While browsing online, I stumbled upon a creative progress bar code featured on this particular website. My goal is to implement a countdown timer that displays the remaining minutes and seconds rather than a percentage. In order to achieve this, I have i ...

jquerycss

Affix Object to Bottom of Stationary Element

I have a header element that I want to remain fixed while scrolling. The scrollable area should be positioned directly after the fixed header, without using position: absolute and removing it from the document flow. To better illustrate the issue, I' ...

htmlcssflexbox

Is there a method to construct this? It appears quite challenging to create the intricate lines

I want to achieve this specific layout, but I am unsure how to align the lines next to the boxes. Should I use display or position properties to accomplish this? Image illustrating my desired outcome ...

htmlcssreactjs

Increased pixels being incorporated into my line spacing

Looking for a solution: A <div> containing only one word at a font size of 16px with a line-height set to 1. Encountering issues with extra space above the text in Chrome and Firefox, while the text bleeds slightly out of the bottom. IE exacerbates t ...

css

After adding more rows, the css formatting seems to disappear

After populating flexigrid using a JavaScript method from another .js file, I noticed that the CSS is lost once new rows are inserted. Surprisingly, other sections on the page are not affected. The code snippet I am using is as follows: var newTbl = &apo ...

jquerycssflexigrid