HTML-CSS: Hover underline animation
HTML-CSS : Exercise-15 with Solution
Using HTML, CSS create an animated underline effect when the user hovers over the text.
- Use display: inline-block to make the underline span just the width of the text content.
- Use the :after pseudo-element with width: 100% and position: absolute to place it below the content.
- Use transform: scaleX(0) to initially hide the pseudo-element.
- Use the :hover pseudo-class selector to apply transform: scaleX(1) and display the pseudo-element on hover.
- Animate transform using transform-origin: left and an appropriate transition.
- Remove the transform-origin property to make the transform originate from the center of the element.
HTML Code:
Explanation:
- <!--License: https://bit.ly/3GjrtVF-->: License information comment.
- <!DOCTYPE html>: Declares the document type as HTML.
- <html>: Opening tag for the HTML document.
- <head>: Opening tag for the head section containing metadata.
- <meta charset="utf-8">: Specifies the character encoding.
- <meta name="viewport" content="width=device-width">: Configures the viewport for responsive design.
- <title>Using HTML, CSS create an animated underline effect when the user hovers over the text</title>: Sets the title of the webpage.
- <body>: Opening tag for the body section.
- <strong>Preview:</strong><br>: Heading for the preview section.
- <p class="hover-underline-animation">Hover w3resource text to see the effect!</p>: Paragraph element with a class for animated underline effect on hover.
CSS Code:
Explanation:
- .w3rcontainer { ... }: Styles for a container element with class w3rcontainer.
- .hover-underline-animation { ... }: Styles for elements with class hover-underline-animation.
- :after: Pseudo-element used to create the underline effect.
- content: '';: Empty content for the pseudo-element.
- transform: scaleX(0);: Initially scales the underline to zero width, hiding it.
- transition: transform 0.25s ease-out;: Adds a transition effect to the transform property for smooth animation.
- .hover-underline-animation:hover:after { ... }: Styles applied when hovering over elements with class hover-underline-animation, making the underline visible by scaling it to full width.
HTML-CSS Editor:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics