Animated multi-line underline

Developer
Eli Fitch
Size
3,247 Kb
Views
68,816
  1. Animated multi-line underline Previews
  2. Animated multi-line underline HTML Codes
  3. Animated multi-line underline CSS Codes

How do I make an animated multi-line underline?

Animating a pseudo element "underline" (.sad-link) to full height on hover works great for short links and breaks for multiline links. Here's a solution, .happy-link!. What is a animated multi-line underline? How do you make a animated multi-line underline? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

Animated multi-line underline Previews
IQ Test

Animated multi-line underline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated multi-line underline</title> <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! */ body { padding: 4em;
}
.container { width: 250px; margin-bottom: 2em;
}
a { font-family: helvetica; font-size: 3em; text-decoration: none;
}
.sad-link { position: relative; display: inline-block; color: #444;
}
.sad-link:after { content: ''; position: absolute; z-index: -1; bottom: -0.15em; left: -.15em; width: calc(100% + .3em); height: 0.15em; background: #FF44FF; transition: all .2s;
}
.sad-link:hover:after { height: calc(100% + 0.3em);
}
.happy-link { line-height: 1.15; transition: background-position 0.15s linear 0.1s, box-shadow 0.15s linear 0s; background-image: linear-gradient(to bottom, #FF44FF 0%, #FF44FF 100%); background-size: 100%; background-repeat: no-repeat; background-position: 0 1em; color: #444; overflow: hidden;
}
.happy-link:hover { cursor: pointer; background-image: linear-gradient(to bottom, #FF44FF 0%, #FF44FF 100%); background-position: 0 0em; box-shadow: 0.2em 0 0 #FF44FF, -0.2em 0 0 #FF44FF; transition: background-position 0.1s linear 0s, box-shadow 0.1s linear 0.1s;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <a class="sad-link">A sad multiline link :(</a> <br><br><br> <a class="happy-link">A happy multiline link :)</a>
</div>
<a class="sad-link">:( short link</a>
<br><br><br>
<a class="happy-link">:) short link</a>
</body>
</html>

Animated multi-line underline - Script Codes CSS Codes

body { padding: 4em;
}
.container { width: 250px; margin-bottom: 2em;
}
a { font-family: helvetica; font-size: 3em; text-decoration: none;
}
.sad-link { position: relative; display: inline-block; color: #444;
}
.sad-link:after { content: ''; position: absolute; z-index: -1; bottom: -0.15em; left: -.15em; width: calc(100% + .3em); height: 0.15em; background: #FF44FF; transition: all .2s;
}
.sad-link:hover:after { height: calc(100% + 0.3em);
}
.happy-link { line-height: 1.15; transition: background-position 0.15s linear 0.1s, box-shadow 0.15s linear 0s; background-image: linear-gradient(to bottom, #FF44FF 0%, #FF44FF 100%); background-size: 100%; background-repeat: no-repeat; background-position: 0 1em; color: #444; overflow: hidden;
}
.happy-link:hover { cursor: pointer; background-image: linear-gradient(to bottom, #FF44FF 0%, #FF44FF 100%); background-position: 0 0em; box-shadow: 0.2em 0 0 #FF44FF, -0.2em 0 0 #FF44FF; transition: background-position 0.1s linear 0s, box-shadow 0.1s linear 0.1s;
}
Animated multi-line underline - Script Codes
Animated multi-line underline - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4.5
Size 3,247 Kb
Views 68,816
Do you need developer help for Animated multi-line 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!

Eli Fitch (elifitch) Script Codes
Name
Smiley guy
SVG hamburger menu button
Goodbye 2016
Node DC Animated SVG Logo
3D Retro Wave Spin
Gradient Borders Mixin
Canvas Hero Prototype
Neon slicey cube
Animated SVG Hexagon
Slanty Button Mixin
Create amazing blog posts 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!