Animated Link Underline

Developer
Insprd
Size
1,875 Kb
Views
28,336
  1. Animated Link Underline Previews
  2. Animated Link Underline HTML Codes
  3. Animated Link Underline CSS Codes

How do I make an animated link underline?

What is a animated link underline? How do you make a animated link underline? This script and codes were developed by Insprd on 13 September 2022, Tuesday.

Animated Link Underline Previews
IQ Test

Animated Link Underline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Link Underline</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="">portfolio</a>
</body>
</html>

Animated Link Underline - Script Codes CSS Codes

/* 1. don't forget to replace the "a" tag selector with your actual selectors */
/* 2. don't forget to click the eyeball icon to add browser-specific prefixes to your code, before you copy & paste */
a { /* sets up rules for the hover state */ text-decoration: none; position: relative; /* uses text-transform instead of actual all-caps*/ text-transform: uppercase; /* default color you used on your cargo theme */ color: #333333;
}
/* the :before selector allows us to insert content with css. In this case, we're inserting a tiny rectangle so we can have a custom underline. */
a:before { content: ""; position: absolute; width: 100%; height: 1px; bottom: -8px; left: 0; background-color: #69b4a2; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s;
}
/* hover effects! */
a:hover { color: #69b4a2; -webkit-transition: color .3s ease-in-out 0s; transition: color .3s ease-in-out 0s;
}
a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1);
}
/* other styles */
* {font-family:Futura;font-size:10px;margin:40px}
Animated Link Underline - Script Codes
Animated Link Underline - Script Codes
Home Page Home
Developer Insprd
Username insprd
Uploaded September 13, 2022
Rating 3
Size 1,875 Kb
Views 28,336
Do you need developer help for Animated Link Underline?

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!

Insprd (insprd) Script Codes
Name
Bolt action
Hover Animation from UNIQLO
A Pen by insprd
Loading anim
A Scanner Darkly
Centered Isotope masonry
Simple Spinning Logo Idea
Brick a link with CSS
Infinite Carousel
Minimal Clock Card
Create amazing sales emails 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!