 |
| Underline hover effect using html and css |
In this article, we given a Underline hover effect using html and css source code as a project. It is an unique project that works as when user hover or click on the text, then the underline comes and it looks like a hover effect. It is an advanced hover effect, so you can use this heading or lists. In this project, we given a guide with source code to create a hover effect easily.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Underline hover effect using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Underline-hover-effect.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Underline hover effect using html and css source code
Here we given a html and css source code of Underline hover effect project as given -
HTML
In HTML, we created a structure by adding a list. In the list, we added three list items as Home, About us and Contact us. Linked a css to design the text and create hover effect with transition. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Underline Hover Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</div>
</body>
</html>CSS
In CSS, we added a styling and position to the text. Added a hover effect using transition and other advanced properties to create underline hover effect. Copy the given css code and paste it into style.css file.
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
text-align: center;
}
ul {
display: flex;
gap: 2.5rem;
}
li {
position: relative;
display: block;
text-decoration: none;
cursor: pointer;
font-size: 22px;
color: #000000;
text-transform: uppercase;
padding: 4px 0;
transition: 0.5s;
}
li::after {
position: absolute;
content: "";
width: 100%;
height: 3px;
top: 100%;
left: 0;
background: #001aff;
transition: transform 0.5s;
transform: scaleX(0);
transform-origin: right;
}
li:hover {
color: #0044ff;
}
li:hover::after {
transform: scaleX(1);
transform-origin: left;
}Also see this -
Hope this helps you to know about Underline hover effect using html and css source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects