Learn how to create an attractive underline hover effect using HTML and CSS. Engage users with interactive text styling.
Table of Contents
In the world of web design, the finer details can make a significant difference. One such detail is the "Underline Hover Effect," a simple yet effective way to enhance your text content. In this guide, we'll show you how to create this effect using HTML and CSS to improve the user experience on your website.
Why Use Underline Hover Effects?
Underline hover effects are a great way to engage your audience. When users hover their cursor over a piece of text, it not only captures their attention but also indicates that the text is interactive. This subtle interaction can lead to higher engagement and improved user experience.
Prerequisites
Before we dive into the step-by-step guide, you should have a basic understanding of HTML and CSS. If you're not familiar with these languages, consider taking some introductory courses to get started.
Source Code
Step 1 (HTML Code):
To begin, create the HTML structure of your web element. This typically involves using HTML tags to define the content and elements that will have the underline hover effect.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let me break it down for you:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used. In this case, it's HTML5.
2. <html lang="en">: This is the opening tag of the HTML document. It specifies that the content of the page is in the English language ("en").
3. <head>: This is the head section of the HTML document. It contains metadata about the web page, such as character encoding and linked stylesheets.
- <meta charset="UTF-8">: This meta tag specifies the character encoding for the document, which is UTF-8, a widely used character encoding for text on the web.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to define how Internet Explorer should render the webpage. In this case, it specifies that the highest available version of Internet Explorer should be used ("IE=edge").
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag is used for responsive web design. It tells the browser to set the viewport width to the device width and set the initial zoom scale to 1.0, which is typically used to ensure that the page is displayed correctly on mobile devices.
- <title>Underline Hover Effect</title>: This tag sets the title of the web page, which is displayed in the browser's title bar or tab. In this case, the title is "Underline Hover Effect."
- <link rel="stylesheet" href="styles.css">: This tag links an external stylesheet (CSS file) to the HTML document. The href attribute specifies the path to the CSS file, which is named "styles.css." This file is used to define the visual styles of the web page.
5. <body>: This is the opening tag of the body section of the HTML document. It contains the visible content of the web page.
- <ul>: This is an unordered list (bullet-point list) that contains a list of items.
- <li>Home</li>, <li>About</li>, <li>Contact</li>: These are list items within the unordered list. They represent three menu items - "Home," "About," and "Contact."
Step 2 (CSS Code):
Once your HTML is in place, use CSS to define the styling of your element. This includes setting the initial appearance, font, color, and positioning.
Let's break it down step by step:
1. @import url(https://fonts.googleapis.com/css?family=Lato);
- This line imports the "Lato" font from Google Fonts, making it available for use in the webpage. It's commonly used for setting custom fonts.
2. body
- This block of code sets the styling for the entire page's body element.
- display: flex; makes the body a flex container, allowing for easy alignment of its child elements.
- height: 100vh; sets the body's height to 100% of the viewport height, making it take up the entire vertical space of the browser window.
- justify-content: center; and align-items: center; center the content both horizontally and vertically within the body.
- text-align: center; centers the text content within the body.
- background: #000; sets the background color of the body to black.
3. ul
- This code styles an unordered list element.
- display: flex; turns the list into a flex container, arranging its child list items horizontally.
- gap: 2.5rem; adds a gap of 2.5rem (a unit of length) between list items, creating some spacing.
4. li
- This block of code styles the list items (menu items) within the unordered list.
- position: relative; allows for absolute positioning of child elements within the list item.
- display: block; makes the list items display as blocks.
- text-decoration: none; removes the default underlines for hyperlinks.
- font-family: "Lato"; sets the font-family to "Lato," which was imported using the @import statement.
- cursor: pointer; changes the cursor to a hand icon on hover, indicating interactivity.
- font-size: 22px; sets the font size to 22 pixels.
- color: #ecf0f1; defines the text color as a light gray.
- text-transform: uppercase; transforms the text to uppercase.
- padding: 4px 0; adds padding above and below the list item text.
- transition: 0.5s; adds a smooth transition effect with a duration of 0.5 seconds when properties change.
5. li::after
- This pseudo-element styles the horizontal line (underline) that appears under the list item text when hovered.
- position: absolute; absolutely positions this element within the list item.
- content: ""; provides an empty content for the pseudo-element.
- width: 100%; makes the line as wide as the list item.
- height: 3px; sets the height of the line to 3 pixels.
- top: 100%; positions the line just below the list item text.
- left: 0; aligns the line to the left.
- background: #ff7000; defines the background color of the line.
- transition: transform 0.5s; adds a transition effect for the transform property with a duration of 0.5 seconds.
- transform: scaleX(0); initially scales the line to have no width (invisible).
- transform-origin: right; sets the scaling origin to the right side.
6. li:hover
- This styles the list item when it's hovered over by the mouse.
- color: #95a5a6; changes the text color to a light blue-gray when hovered.
7. li:hover::after
- This styles the pseudo-element (underline) when the list item is hovered over.
- transform: scaleX(1); scales the line to full width when hovered.
- transform-origin: left; changes the scaling origin to the left side for a smooth expanding effect.
@import url(https://fonts.googleapis.com/css?family=Lato);
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
background: #000;
}
ul {
display: flex;
gap: 2.5rem;
}
li{
position: relative;
display: block;
text-decoration: none;
font-family: "Lato";
cursor: pointer;
font-size: 22px;
color: #ecf0f1;
text-transform: uppercase;
padding: 4px 0;
transition: 0.5s;
}
li::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
top: 100%;
left: 0;
background: #ff7000;
transition: transform 0.5s;
transform: scaleX(0);
transform-origin: right;
}
li:hover {
color: #95a5a6;
}
li:hover::after {
transform: scaleX(1);
transform-origin: left;
} Final Output:
Conclusion:
The underline hover effect is a fantastic way to enhance your website's user experience. By following these simple HTML and CSS steps, you can create interactive and engaging text that captures your visitors' attention. Experiment, customize, and watch your web typography come to life.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
