Item menu effect with pseudo-element

Developer
Twikito
Size
2,602 Kb
Views
22,264
  1. Item menu effect with pseudo-element Previews
  2. Item menu effect with pseudo-element HTML Codes
  3. Item menu effect with pseudo-element CSS Codes
  4. Item menu effect with pseudo-element JS Codes

How do I make an item menu effect with pseudo-element?

What is a item menu effect with pseudo-element? How do you make a item menu effect with pseudo-element? This script and codes were developed by Twikito on 11 September 2022, Sunday.

Item menu effect with pseudo-element Previews
IQ Test

Item menu effect with pseudo-element - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Item menu effect with pseudo-element</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav>	<a href="#" data-text="Lorem.">Lorem.</a>	<a href="#" data-text="Quos.">Quos.</a>	<a href="#" data-text="Possimus.">Possimus.</a>	<a href="#" data-text="Iusto.">Iusto.</a>
</nav> <script src="js/index.js"></script>
</body>
</html>

Item menu effect with pseudo-element - Script Codes CSS Codes

a { position: relative; display: inline-block; margin: 0 .5em; padding: .5em 1em; overflow: hidden; border: .2em solid white; text-decoration: none; -webkit-transition: border-color .2s ease-out; transition: border-color .2s ease-out;
}
a::before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: .5em 1em; background: #fff; color: #3498db; -webkit-transform: translateY(-101%); transform: translateY(-101%); content: attr(data-text); -webkit-transition: -webkit-transform .2s ease-out; transition: -webkit-transform .2s ease-out; transition: transform .2s ease-out; transition: transform .2s ease-out, -webkit-transform .2s ease-out;
}
a:hover, a:focus { border-color: white;
}
a:hover::before, a:focus::before { -webkit-transform: translateY(0); transform: translateY(0);
}
/* misc */
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: center; background: #3498db; color: white; font: 1em/1.4 "open sans condensed";
}
nav { margin: auto; font-size: 1.5em; font-weight: 700; text-transform: uppercase;
}
a { color: inherit;
}

Item menu effect with pseudo-element - Script Codes JS Codes

/*	NO JS!
*/
Item menu effect with pseudo-element - Script Codes
Item menu effect with pseudo-element - Script Codes
Home Page Home
Developer Twikito
Username Twikito
Uploaded September 11, 2022
Rating 3
Size 2,602 Kb
Views 22,264
Do you need developer help for Item menu effect with pseudo-element?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Twikito (Twikito) Script Codes
Name
Input awesome effect on focus with only css
Beautiful Textual Map of France with CSS
Pure CSS Slider
Tooltip with pseudo-element
CSS-only shadow-scrolling effect
CSS3 Box Shadows Effects
Summary with pseudo-element
Menu item 3D effect on hover with only css
Full page table inside the grid
UI with UX improvements with only CSS
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!