CSS Pseudo Element Hover Effects

Developer
Keith Light
Size
4,029 Kb
Views
18,216
  1. CSS Pseudo Element Hover Effects Previews
  2. CSS Pseudo Element Hover Effects HTML Codes
  3. CSS Pseudo Element Hover Effects CSS Codes
  4. CSS Pseudo Element Hover Effects JS Codes

How do I make an css pseudo element hover effects?

I have used before and after elements to create hover over effects, mainly using transforms.. What is a css pseudo element hover effects? How do you make a css pseudo element hover effects? This script and codes were developed by Keith Light on 18 November 2022, Friday.

CSS Pseudo Element Hover Effects Previews
IQ Test

CSS Pseudo Element Hover Effects - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Pseudo Element Hover Effects</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Lato:300,400);
div.container { font-family: 'Lato'; font-size: 1rem; margin: 0 auto; padding: 5rem 1rem; text-align: center;
}
div.container a { color: #FFF; text-decoration: none; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0;
}
.red { background: #f44336;
}
.black { background: #2e2e2e;
}
.green { background: #39CCCC;
}
.purple { background: #673ab7;
}
.cyan { background: #00bcd4;
}
.yellow { background: #f19f0f;
}
/* Top & Bottom Borders Out */
div.topBotomBordersOut a:before,
div.topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;
}
div.topBotomBordersOut a:before { top: 0px; transform: translateY(10px);
}
div.topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px);
}
div.topBotomBordersOut a:hover:before,
div.topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px);
}
/* Cross Links */
div.crossLinks a:before,
div.crossLinks a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; transition: all 0.3s;
}
div.crossLinks a:before { top: 0;
}
div.crossLinks a:after { top: 100%;
}
div.crossLinks a:hover:before,
div.crossLinks a:hover:after { top: 50%; left: 25%; background: #39CCCC; width: 50%; z-index: -10;
}
div.crossLinks a:hover:before { transform: rotate(45deg);
}
div.crossLinks a:hover:after { transform: rotate(-45deg);
}
/* Circles */
div.circles a:before,
div.circles a:after { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); background: transparent; border: 2px solid red; content: ""; opacity: 0; transition: all 0.3s;
}
div.circles a:hover:before { width: 50px; height: 50px; opacity: 0.2; border-width: 4px; ;
}
div.circles a:hover:after { width: 70px; height: 70px; opacity: 0.4;
}
/* Slider */
div.slider a:before { position: absolute; left: 0; top: 0; width: 0px; height: 2px; background: #fff; content: ""; opacity: 0; transition: all 0.3s;
}
div.slider a:hover:before { width: 100%; opacity: 1;
}
/* pullDown */
div.pullDown a:before { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); content: ""; transition: all 0.3s;
}
div.pullDown a:hover { font-weight: bold;
}
div.pullDown a:hover:before { height: 100%;
}
/* pullUp */
div.pullUp a:before { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); content: ""; transition: all 0.3s;
}
div.pullUp a:hover { font-weight: bold;
}
div.pullUp a:hover:before { height: 100%;
}
/* Extra Info (uses alt attr to get additional text)*/
div.extraInfo a:after { position: absolute; right: -20px; content: " /"; transition: all 0.3s;
}
div.extraInfo a:last-child:after { content: "";
}
div.extraInfo a:before { font-size: 14px; position: absolute; left: 0; bottom: -10px; width: 100%; height: 0; overflow: hidden; background: rgba(255, 255, 255, 0.5); content: " " attr(alt) " "; opacity: 0; transition: all 0.3s;
}
div.extraInfo a:hover:before { height: 50%; opacity: 1;
}
@media screen and (max-width: 550px) { div.container { padding: 2.5rem 0.5rem; } div.container a { margin: 0px 5px; padding: 5px 5px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container red topBotomBordersOut"> <a href="#">HOME</a> <a href="#">ARTICLES</a> <a href="#">PORTFOLIO</a> <a href="#">ABOUT</a> <a href="#">CONTACT</a>
</div>
<div class="container black crossLinks"> <a href="#">HOME</a> <a href="#">ARTICLES</a> <a href="#">PORTFOLIO</a> <a href="#">ABOUT</a> <a href="#">CONTACT</a>
</div>
<div class="container green circles"> <a href="#">HOME</a> <a href="#">ARTICLES</a> <a href="#">PORTFOLIO</a> <a href="#">ABOUT</a> <a href="#">CONTACT</a>
</div>
<div class="container purple slider"> <a href="#">HOME</a> <a href="#">ARTICLES</a> <a href="#">PORTFOLIO</a> <a href="#">ABOUT</a> <a href="#">CONTACT</a>
</div>
<div class="container cyan pullDown"> <a href="#">HOME</a> <a href="#">ARTICLES</a> <a href="#">PORTFOLIO</a> <a href="#">ABOUT</a> <a href="#">CONTACT</a>
</div>
<div class="container black pullUp"> <a href="#" alt="1st box">HOME</a> <a href="#" alt="2nd box">ARTICLES</a> <a href="#" alt="3rd box">PORTFOLIO</a> <a href="#" alt="4th box">ABOUT</a> <a href="#" alt="5th box">CONTACT</a>
</div>
<div class="container yellow extraInfo"> <a href="#" alt="1st box">HOME</a> <a href="#" alt="2nd box">ARTICLES</a> <a href="#" alt="3rd box">PORTFOLIO</a> <a href="#" alt="4th box">ABOUT</a> <a href="#" alt="5th box">CONTACT</a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Pseudo Element Hover Effects - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
div.container { font-family: 'Lato'; font-size: 1rem; margin: 0 auto; padding: 5rem 1rem; text-align: center;
}
div.container a { color: #FFF; text-decoration: none; margin: 0px 10px; padding: 10px 10px; position: relative; z-index: 0;
}
.red { background: #f44336;
}
.black { background: #2e2e2e;
}
.green { background: #39CCCC;
}
.purple { background: #673ab7;
}
.cyan { background: #00bcd4;
}
.yellow { background: #f19f0f;
}
/* Top & Bottom Borders Out */
div.topBotomBordersOut a:before,
div.topBotomBordersOut a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;
}
div.topBotomBordersOut a:before { top: 0px; transform: translateY(10px);
}
div.topBotomBordersOut a:after { bottom: 0px; transform: translateY(-10px);
}
div.topBotomBordersOut a:hover:before,
div.topBotomBordersOut a:hover:after { opacity: 1; transform: translateY(0px);
}
/* Cross Links */
div.crossLinks a:before,
div.crossLinks a:after { position: absolute; left: 0px; width: 100%; height: 2px; background: #FFF; content: ""; transition: all 0.3s;
}
div.crossLinks a:before { top: 0;
}
div.crossLinks a:after { top: 100%;
}
div.crossLinks a:hover:before,
div.crossLinks a:hover:after { top: 50%; left: 25%; background: #39CCCC; width: 50%; z-index: -10;
}
div.crossLinks a:hover:before { transform: rotate(45deg);
}
div.crossLinks a:hover:after { transform: rotate(-45deg);
}
/* Circles */
div.circles a:before,
div.circles a:after { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; border-radius: 50%; transform: translate(-50%, -50%); background: transparent; border: 2px solid red; content: ""; opacity: 0; transition: all 0.3s;
}
div.circles a:hover:before { width: 50px; height: 50px; opacity: 0.2; border-width: 4px; ;
}
div.circles a:hover:after { width: 70px; height: 70px; opacity: 0.4;
}
/* Slider */
div.slider a:before { position: absolute; left: 0; top: 0; width: 0px; height: 2px; background: #fff; content: ""; opacity: 0; transition: all 0.3s;
}
div.slider a:hover:before { width: 100%; opacity: 1;
}
/* pullDown */
div.pullDown a:before { position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); content: ""; transition: all 0.3s;
}
div.pullDown a:hover { font-weight: bold;
}
div.pullDown a:hover:before { height: 100%;
}
/* pullUp */
div.pullUp a:before { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.5); content: ""; transition: all 0.3s;
}
div.pullUp a:hover { font-weight: bold;
}
div.pullUp a:hover:before { height: 100%;
}
/* Extra Info (uses alt attr to get additional text)*/
div.extraInfo a:after { position: absolute; right: -20px; content: " /"; transition: all 0.3s;
}
div.extraInfo a:last-child:after { content: "";
}
div.extraInfo a:before { font-size: 14px; position: absolute; left: 0; bottom: -10px; width: 100%; height: 0; overflow: hidden; background: rgba(255, 255, 255, 0.5); content: " " attr(alt) " "; opacity: 0; transition: all 0.3s;
}
div.extraInfo a:hover:before { height: 50%; opacity: 1;
}
@media screen and (max-width: 550px) { div.container { padding: 2.5rem 0.5rem; } div.container a { margin: 0px 5px; padding: 5px 5px; }
}

CSS Pseudo Element Hover Effects - Script Codes JS Codes

//to be honest, I pinched the top version from https://codepen.io/EvyatarDa/pen/waKXMd
//the rest are built by me
//the bottom version is using the content alt attribute to get additional text
//added preventDefault to stop the page jumping back to the top when clicking on mobile
$('a').click(function(e){ e.preventDefault();
});
CSS Pseudo Element Hover Effects - Script Codes
CSS Pseudo Element Hover Effects - Script Codes
Home Page Home
Developer Keith Light
Username keefyboooo
Uploaded November 18, 2022
Rating 3
Size 4,029 Kb
Views 18,216
Do you need developer help for CSS Pseudo Element Hover Effects?

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!

Keith Light (keefyboooo) Script Codes
Name
SlideToggle Menu
Angled Menu
Off Canvas Pop Out Menu
DevWars Weekly Challenge Week 2
Skills Display, using jQuery
Material Design Colour Palette
Destiny Style Loading Icon
Weather App Concept
Animated Burger Menu
Tron Light Cycle Loader
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!