Creating Custom Animated Links with Psuedo Elements (CSS)

Key Takeaways

what is up everybody today we are going to step into the world front and development in css specifically i'm going to show you how to create this these specific links right here with this really cool micro animation it's based on a hover state where we're creating our own custom underline i based on this hover state and i'll show you exactly how to do this it's strictly html css no javascript no libraries of any sort and i thought it'd just be a fun way to just come up with something and show you guys how to do this and um you could really the possibilities are endless with uh this technique here using pseudo elements of before and after so as always make sure to subscribe and let's get started now wait one moment you might be interested in learning css in an interactive online platform and if that's the case definitely check out designcourse.com css for my upcoming interactive css course you can simply enter your email and you'll be notified when that releases which should be sometime later this year all right let's get back to it all right so the very first thing you'll do is go over the project structure here and this is basically the same sort of just basic html pure css template no library setup that i usually use and so we have an index.html here which with some boilerplate which by the way if you're using visual studio code you can just hit shift and one to get your explanation point hit enter for an abbreviation and that gets you basically to where i'm at except i did also link the css file right there um and then we also have a css folder and i'm using sas for this so i'm using the uh the live sas compiler as well and i'm currently watching it so it compiles that down to a css file and of course it's empty and our index.html is empty as well within the body tags at least so let's go ahead and just create real quick markup here so we're going to put everything inside of a container and then also everything inside of a card then we're gonna have three different cards then we're gonna have an h1 and by the way i'm using emmett for a quick way to write html um i do have a tutorial that you can search on my channel to find out about emmett of course so it's about the underline enter there we go and then also we're going to have a paragraph with like lorem 15 i guess uh just just 15 random words and then also we'll have our magical link so it's going to look like any other link except we're going to have take the test here that's all our markup is for each card and we're just going to copy and paste that two more two more times so we have a total of three awesome stuff now what we can also do is right click open with live server and this will show up right here and we'll just refer back and forth to this all right so the first thing we're going to do is we're going to in our sas file we're going to set a body element and i'm just going to paste this in because it's really not the purpose of the tutorial sending the background here to a dark desaturated blue font family pop-ins i already have that installed on my machine of course you want to import that from google fonts um if this were a real project resetting margin zero um display grid here place content center height hundred view per height all right so the these two these three lines allow us to take that container element and just center it vertically and uh horizontally next up after that we're gonna have our container and our container is simply a margin of er zero on the top and bottom and four am on the left and right just to get away from the edges we have display flex to take those three cards and just that's a very quick way the fastest way to put something in columns and then a gap which is the white space between them one m unit um outside of that we're gonna have our card as well and so our card is simply a background um and this is white i did have a different background color you could just put in white for the value instead of this rgb function um we also have margin bottom of two m units and padding of four m units just to get some white space there all right so now let's go ahead and actually work on our link itself so um we're going to put in our a and so this is going to style everything obviously if we're using the a selector and we're going to put in a specific color here it's just a blue color that matches the current background so now if i were to save everything right here you'll see what everything currently looks like and that is the old one oh no this is the new one there we go and i yeah quickly transformed it to this okay so continuing on i we're going to take the font size just bump it up a little bit to 1.3 rem units text decoration we're putting none because we're going to have our own custom underline we're also going to put a margin top of 1m units we're going to have a display of inline hyphen block we are going to have a font weight of bold a padding of 0.5 m units and a margin left of negative 0.5 m units to offset that padding because it will push it over a little bit all right let's let's see what this looks like here so this is the current situation all right and now we're also going to add and this is going to be the first really pertinent part of this tutorial um we're going to add position relative and whenever you're using these pseudo elements like before and after and you're trying to do like custom graphics like we are a real common pattern is on the parent you put position relative and then on the pseudo elements of before and after you put position absolute all right so that means when you're absolutely positioning the pseudo elements you want it to be in relation to uh or you want to be yeah in relation to the the parent element um so that when we push it down like from top and bottom values it's going to be based on this link right here otherwise it won't work well we can probably experiment with that just so i could show you um and then also we're we're we're going to add another property usually i use a tool if you go to google and type css clippy it's just a visual tool for the clip path property and all this is is just a rectangle and all it's saying is we're going to transform this link right here so that anything that falls outside of it based on our pseudo element of before and after it won't be seen all right and i'll show you that as well so next up we're going to take uh and before and after all right so we want to style both of these with a few things first position absolute on both we'll also have content empty on both as well so if we do control one um you'll see position relative on the parent you see position absolute and content empty on the pseudo elements which is a real common pattern for this sort of thing next up we're going to have border bottom of three pixels solid and that blue color so we're going to take this and paste that right there we're also going to have border radius of 1m units bottom of 0.3 m units and that bottom by the way is making that that line show underneath the actual type which is what we want and if we save this at this point we should see no not yet in a second we'll see the underline uh we haven't specified a width yet and we are going to have a transform element right here uh we'll do that in a little bit so then we're going to take our and before all right and we're going to specify a width of one m unit now at this point we should see it there it is all right okay and then we're gonna have a transform origin of left now the reason we're using that is because in a little bit we're going to scale these things from uh scale x and we don't want it to the transform default origin of center because it'll it'll scale it from the center we want it to scale it from left which means it'll go like this all right after that we'll have our and after and this one i'm putting in a width of i sorry a width of a percentage value 82 and i found that that worked well to keep it fluid um and then we're gonna have left one m unit and then a transform which we're not going to add yet i just want to show what this is going to look like here this should look like a solid underline at this point this is kind of like the default state so now what we'll do is go ahead and specify a transition property which is going to animate it when we do the hover states so transform that that's the element we want to actually actually animate 0.5 seconds cubic bezier right there just to make the animation a little bit more interesting all right so now what we'll do is we're going to on our before element push it out of view so what we'll do is specify transform or actually i'm wrong we got to put that on the after element we're always going to have this one in view so this is going to be transform translate x 110 that gets it out of view so if i save this we're no longer going to see that solid line it's actually over here and that's why if we come back over here and we get rid of the clip path now we're going to see it off that's what that clip path property does makes it so you can't see anything outside of the balance of the actual element all right and now all we have to do is put in our two more roll sets and that's going to be on the the the hyperlink the a element we're going to do and hover what are we going to change the before element we're going to say transform translate our note let's do scale x 0.3 so we're kind of uh scaling it down a little bit and then also we'll just copy that and after we're going to do a translate x of zero all right let's save it and give it a shot look at that see if i could do this at all there we go very very fun cool stuff for custom links all right everybody hopefully you enjoyed that now with this technique of using before and after pseudo elements you can really create a lot of really cool uh unique ideas uh based on animate hover states and you know anything else in css really you can apply this to any element and you can add extra graphics uh interactive or not alright so hopefully you enjoyed that if you did make sure to subscribe or leave a comment leave a like et cetera et cetera check out designcourse.com all that good stuff i'll stop spamming you now and see you later goodbye [Music] you