Dynamic animation that creates an underlined hover effect for text-wrapped elements

While exploring the website , I came across a cool underline hover animation for their links. What caught my attention was how they've managed to disable the underline effect when the text inside an <a> tag wraps and spans multiple lines.

I'm curious about how they achieved this feature of disabling the underline hover effect only when the text wraps.

It doesn't appear that there is any inline or additional class being applied, and the CSS rules seem to remain consistent whether the text wraps or not.

Does anyone have any insights into how they pulled off this intriguing technique?

htmlcss

Answer №1

The feedback provided is indeed accurate - the specified website fails to address the scenario where links are displayed without underlines.

Nevertheless, I have discovered a different approach that successfully manages the multiline underline animation. This method involves utilizing a background image for the component and implementing similar techniques.

Here is the link to the alternative solution.

$color-on-light: black;
$underline-width: 2px;

color: $color-on-light;
background-repeat: no-repeat;
background-size: 0% 100%;
background-position: bottom right;
transition: background-size 0.15s;
padding-bottom: $underline-width;
background-image: linear-gradient(
    transparent calc(100% - #{$underline-width}),
    $color-on-light $underline-width
);

&.on-dark {
    $color-on-dark: white;

    color: $color-on-dark;
    background-image: linear-gradient(
        transparent calc(100% - #{$underline-width}),
        $color-on-dark $underline-width
    );
}

&:hover {
    background-size: 100% 100%;
    background-position: bottom left;
}

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

The utilization of ng-class in a dropdown menu: A step-by-step guide

I am new to AngularJS and I am trying to figure out how to disable a selectlist when an option has been chosen and enable it when no option has been selected. My goal is to have the selectlist disabled if an object is not empty, and enabled if it's em ...

javascripthtmlangularjs

What is the best way to ensure that when a div is opened, the information to the right does not get pushed down?

I have a functioning menu bar, but when it expands, the content below is pushed down even though it should not be affected. How can I adjust my code to prevent this issue? View my website here: <div id="menu_wrapper"> <div id="menu"> &l ...

htmlcss

Tips on creating horizontal scrolling for rows once they hit the maximum width

I need the content to scroll horizontally if it exceeds the maximum width. I have tried setting the width to 100%, using overflow-x:auto, and white-space: nowrap as suggested in other stackoverflow threads, but it doesn't work for Bootstrap columns. I ...

htmlcssbootstrap-4

Making Bootstrap div stretch vertically with absolutely positioned content

Is there a way to make the middle div expand vertically on screen sizes smaller than 1000px without causing the text to flow under the image in the third div? Even clearing floats doesn't seem to solve the issue. This code is based on Bootstrap 4.4. ...

htmlcssbootstrap-4

Can you explain the term "the number of cookies from other websites" and suggest ways to modify or improve it?

Lately, I've been grappling with the challenge of incorporating cookies into a JS/HTML program, but for some unknown reason, it just refuses to cooperate. After consulting w3schools' tutorial and reading through the solution provided on How do I ...

javascripthtmlcookies

Struggling to make fadeIn() function properly in conjunction with addClass

I've been struggling with this issue for quite some time now and I just can't seem to make it work. The JavaScript I'm working on involves using addClass and removeClass to display and hide a submenu element. While the addclass and removeCla ...

javascriptjqueryhtmlcss

Is there a method to individually collapse each div?

Each question in the database has a corresponding button. When one of these buttons is clicked, only the answer to that specific question should be displayed. However, the issue currently is that clicking on any button reveals all the answers simultaneousl ...

htmlspringbootstrap-4freemarker

What is the best way to update the style of a class in Bootstrap when working offline with a CDN?

Is it possible to customize the style of a predefined class in Bootstrap when using it through a CDN? For instance, if I am using a navigation menu, how can I modify its styling that is specified in the navigation class? ...

cssbootstrap-4

Adjusting the placement of a dropdown menu while scrolling within the container element using CSS

Is there a way to keep the submenu aligned under the button even when scrolling within the container div? Currently, it stays in the middle of the page. div.container { height: 200px; width: 400px; border: 1px solid black; overflow-y: scroll; ...

htmlcsscss-position

I can't seem to figure out why my Angular 10 select element is not showing the data I've assigned to it. Can someone help me

I'm currently facing an issue with a select element in the HTML template of my Angular project. The problem stems from having a JSON file containing all countries data. Languages Interface export interface Country{ name:string code:string } ...

htmljsonangularselectbootstrap-selectpicker

Tips for creating a hover-activated dropdown menu

How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...

javascripthtmlcss

The toast feature in Bootstrap 5 seems to be malfunctioning as it does not display properly despite the absence of any

Why isn't the Toast displaying in the code snippet below? I'm using bootstrap 5. I'm puzzled because there are no errors in the developer's tools. Any assistance would be greatly appreciated. <!DOCTYPE html> <html lang="en"& ...

javascripthtmljquerybootstrap-5toast

Unable to "clean up" the HTML document

Struggling with utilizing tidy to produce clean html code. My attempt looks like this: tidy -i -utf8 output/page_1530597755.html -b -o test.html However, no output file is being created! Instead, there are numerous warnings and an error message popping u ...

htmlselenium

Button clicking to zoom in and out with three.js

I am looking to include two buttons for zooming in and zooming out. How can I achieve this? I attempted to use the following code, but it did not work for me. var controls = new THREE.OrbitControls(camera, renderer.domElement); function zoomModel(isZoo ...

htmlthree.js

What is the best way to obtain SAPUI5 Explored designs?

I am working on implementing a sap.ui.Table in my project, similar to the one showcased in the SAPUI5 Explored app. The table I am trying to create should allow for multi-selection of items using checkboxes on the left side. However, after downloading th ...

javascriptcsssapui5

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

javascriptphphtmlcssphotoswipe

Is it possible to style a React component based on the rendering of another component?

I have a component called Search that I want to be displayed differently depending on which page is being rendered. On the homepage, I want it to appear at the bottom of the page, but on all other pages, I want it to be at the top. Currently, my app.js lo ...

javascriptcssreactjsreact-routerjsx

Setting a CSS Variable with the Help of jQuery

I need help with changing the background color of a specific .div element when it is clicked on. I want the color to be a variable that can be changed by the user, and this change should occur when the document is ready. Currently, I am using a CSS variab ...

javascriptjqueryhtmlcss

Tips for utilizing the router instance on a different HTML page within the Backbone JS framework

I'm new to Backbone JS and still learning its intricacies. In main.js, I have created a router class that is included in index.html. I've also created an object of that router class associated with the same HTML page. However, when I redirect t ...

javascriptjqueryhtmlbackbone.jsbackbone-routing

I cannot seem to receive the confirmation of success!

Trying to store user details in a database and display a success message that fades in. I have attempted some code, but unfortunately it's not working. Please help me out. Apologies if I am mistaken. Here is my register.php code: <?php require ...

phpjqueryhtmljsonajax