Created
July 11, 2018 20:28
-
-
Save CodeMyUI/085655c87b71640237bcc2a15352b569 to your computer and use it in GitHub Desktop.
Animated underline effect on several lines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="wrap"> | |
<h2>Simple</h2> | |
<p><a href="#" class="underlined underlined--thin">I'm a very long text and it was a pain in the ass to animate an underline effect - but jeez it's such a simple snippet at the end.</a></p> | |
<h2>Let's play with the thickness of this underline</h2> | |
<p><a href="#" class="underlined underlined--thick">I'm an other very long highlighted link.</a></p> | |
<h2>But I want it a bit higher compared to the baseline</h2> | |
<p><a href="#" class="underlined underlined--offset">I'm an other very long link and I'm an artist you know.</a></p> | |
<h2>Let's play with the gradient</h2> | |
<a href="#" class="underlined underlined--gradient">PICKLE RIIIICK</a> | |
<h2>Oooh fancy</h2> | |
<p><a href="#" class="underlined underlined--reverse">I'm an other long link and I don't like lorem.</a></p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Just to make it a bit nice | |
body { | |
font-family: 'Source Code Pro', sans-serif; | |
} | |
.wrap { | |
padding: 10% 20%; | |
} | |
h2 { | |
margin-top: 3em; | |
color: grey; | |
&:first-child { | |
margin-top: 0; | |
} | |
} | |
// Now that is interesting | |
.underlined { | |
color: black; | |
flex: 1; | |
font-size: 2em; | |
line-height: 1.2; | |
text-decoration: none; | |
background-image: linear-gradient(to right, yellow 0, yellow 100%); | |
background-position: 0 1.2em; | |
background-size: 0 100%; | |
background-repeat: no-repeat; | |
transition: background .5s; | |
&:hover, { | |
background-size: 100% 100%; | |
} | |
&--thin { | |
background-image: linear-gradient(to right, black 0, black 100%); | |
} | |
&--thick { | |
background-position: 0 -0.1em; | |
} | |
&--offset { | |
background-position: 0 0.2em; | |
//didn't find another solution than mask the underline shape by a box shadow with the same color than the bg | |
box-shadow: inset 0 -.5em 0 0 white; | |
} | |
&--gradient { | |
background-position: 0 -0.1em; | |
background-image: linear-gradient(to right, yellow 0, lightgreen 100%); | |
} | |
&--reverse { | |
background-position: 100% -0.1em; | |
transition: background 1s; //yep, that's a long link | |
background-image: linear-gradient(to right, yellow 0, yellow 100%); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:300" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment