Before After Hover effect In menu

Menu design is an essential part of any website or web app UI. CSS Menu Hover Effects look really nice & easy to create. In this post we will show you how to create an awesome CSS Menu Hover Effect using the Using only modern HTML and CSS After and Before pseudo elements. As you hover over each menu item you will see that the before and after elements will animate from a width of 0 to 100% on each side causing a in fact nice hover effect. Check out the Menu Hover Effects Demo that we create in the post, and below is the index.html and style.css file created:

In this article, we’ll take a look at how to create a nice menu with hover options.

Concepts

CSS Before After Hover effect In menu items

Hover menus in CSS take edge of the :hover pseudo-selector (Before , After) and various animations, transitions, and transforms to create the menu interactions.

The basic idea is easy: when the mouse hovers over a menu, apply whatever effects are designed (such as add animation in menu or changing background color of menu items) and display the menu items to the user. The items of the menu can be arranged in many ways as we will test shortly.

CSS Before After Hover effect In menu items

HTML

Let’s start with a look at the project structure in index.html:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Menu Hover Effects</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<ul>
		<li><a href="#_">Menu Item 1</a></li>
		<li><a href="#_">Menu Item 2</a></li>
		<li><a href="#_">Menu Item 3</a></li>
		<li><a href="#_">Menu Item 4</a></li>
	</ul>

</body>
</html>

CSS

Styles for the example project can be found in style.css:

html, body{ margin:0px; padding:0px; }

body{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height:100vh;
	background:#1b1d1d;
	font-family: 'Roboto', sans-serif;
}

ul, li{
	list-style: none;
	padding:0px;
	margin:0px;
}

li{
	display:inline-block;
}

li a {
	padding:10px;
	display:block;
	text-decoration: none;
	text-transform: uppercase;
	color:#ddd;
	position:relative;
}
ul li {
    position: relative;
}
ul li a:before {
    position: absolute;
    content: "";
    height: 5px;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #692686;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-in-out;
    direction: left;
    transform-origin: left;
}
ul li:hover> a:before {
    transform: scaleX(1);
}

Thanks for reading and best luck with your next project!