How we can create an underline effect on hover for menu items? Solution: See this CSS Menu Hover Underline Effect, Simple a Line in Bottom Of Text.
Previously I have shared a link hover effect, it also like that but it is a little different and the effect on menu items. Basically, these types of text underline effects are used by many websites. When a user hovers on any link then the underline appears with an animation effect, that attracts users. And somebody use is on the normal link, some use in important navigation links, some on both.
Today you will learn to create a line at the bottom of the text on mouseover. Basically there are 5 list items when you will over on any one of these, then an underline will appear on the bottom side of the text. The main fact of this underline is it starts from left and end on right, that effect looks like a kind of circular movement. Also, this animation makes it different from previously shared programs.
So, Today I am sharing CSS Menu Hover Underline Effect. There I have used pure CSS to create this effect, there is no JavaScript of any other library. And this is a basic thing you can create using only HTML and CSS. It can be good practice for a beginner, also you can use this effect on your websites links or important text.
If you are thinking now how this text bottom sideline effect actually is, then see the preview given below.
Preview Of Line in Bottom Of Text
See this video preview to getting an idea of how this text underline effect looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
CSS Menu Hover Underline Effect Source Code
Before sharing source code, let’s talk about it. First I have created menu items using HTML list tags <ul> & <li> . Inside the list items, I have placed hyperlink tags with text. Hyperlinks are blank, you can fill up these with your links. HTML has very fewer codes, also I have linked the CSS file in the HTML file.
Now using CSS I have placed all the list items in the right place, as you can see in the preview. The link hovers effect is not based on border-bottom or underline commands, it based on blank content with 3px height. For creating this, I have used CSS blank content with :after command (info). And placed the line under the text by giving the value of top: 100%; .
Also I have done some other basic things using CSS. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>Menu Hover Underline | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li><a href="#">home</a></li> <li><a href="#">services</a></li> <li><a href="#">posts</a></li> <li><a href="#">categories</a></li> <li><a href="#">about</a></li> </ul> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Lato); body { display: flex; height: 100vh; justify-content: center; align-items: center; text-align: center; background: #222; } ul { display: flex; flex-direction: column; align-items: start; list-style-type: none; } ul li { padding: 6px 0; } ul li a { position: relative; display: block; text-decoration: none; font-family: "Lato"; font-size: 2rem;; color: #ecf0f1; text-transform: uppercase; padding: 4px 0; transition: 0.5s; } ul li a::after { position: absolute; content: ""; width: 100%; height: 3px; top: 100%; left: 0; background: #ff7000; transition: transform 0.5s; transform: scaleX(0); transform-origin: right; } ul li a:hover { color: #95a5a6; } ul li a:hover::after { transform: scaleX(1); transform-origin: left; } |
That’s It. Now you have successfully created CSS Menu Hover Underline Effect, Line in Bottom Of the Text. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Where is javascript coding
You don’t need any javascript for this.