 Hi there, my friend and friends. Have you ever had a link or links on your site? Of course you have, but have you ever tried to style them by having a text decoration of none and then coming in with a border so you can have a different color on there? Or maybe you've even gone to the more extreme scenario of creating a pseudo element instead so you could easily control the spacing or how far away your line is. If you've ever done anything like that or you've just wondered how you could have more control on your underlines, well, you don't need to do any of this, you don't even need to turn off that text decoration. You have full control over them and you can do some really awesome stuff with it. So let's dive in and see what we can do by first going back to the defaults and starting right here. So the first thing that a lot of people do not realize is we have just, I mean, first of all, we have tons of controls, what we can do here. But we actually have a text decoration. When we do this, it's a shorthand and we have control over a whole bunch of stuff like the thickness. And so you probably didn't know that, but yes we can and let's say it's, I don't know, one REM to make it super huge, right? Or even one M, so it's like matching the size of my text which do not do that, but look, I can do it. So you can just say how thick you want your text to be and it's gonna be that thick, not your text but your underline. So maybe you want, I don't know, let's just do 10 pixels for now or 12, I don't know. Throw a number on there, you can control the thickness. And maybe you want it to be a different color because you don't like the look of the color. Well, yeah, you can do that too, text decoration. This is gonna get a little bit repetitive but you just do color at the end. And let's just say white, so we have a white one or I had a line before it looks a little funky but that's okay, we're exaggerating for this demo and look at that, we have that right there. And a cool thing with the text decoration color is out of all of these, this is the one that is an animatable property which means if I have a hover and a focus state that changes the color of my text and I want my text decoration to also change then animation can animate and it's not, I guess, super obvious. Let's make this red and we'll make it a little bit longer just for the fun of it. So you can definitely see that's actually animating there. So yeah, an option there if you want. I think that looks kind of terrible at the moment though so I'm gonna remove that and remove this and we'll just stick with the defaults that we have and focus on these. Another thing you can do, this one you probably wanna do a little bit less often and we'll speed things up with a copy and paste but you actually have some options for your styles here as well. So the default here is solid. If I do that, nothing changes but if you want you can actually come in with a few different ones, we have a double if you want two lines. This one I find looks a little bit better if you have smaller things for whatever reason like that split between is really small but it is what it is. You can also do dotted and get some dots as an underline instead. We have dashed if you like dashed and there's also the classic wavy for some wavy lines along the way there and some of them look better than others but there we go, we do have them. Of course there is the skip ink which is on right now so that is another thing and I'm just gonna come inside my link here just to add some random J just to show you that because of the skip ink you do get these types of things happening. So the text declaration skip ink on all the modern browsers now the auto is going to skip so you can see it's skipping there. In general this is considered best practice because if we have a solid here it makes it a lot easier to read your text so that's why it became the standard but if ever you have something like wavy and you do wanna remove it for whatever reason you can turn that off but even now you can see that because of the color combination going on the J is quite hard to read so there is an all here as well. In general with Latin characters the all and the auto will work exactly the same way. The all is more if you're using different languages like Chinese, Japanese or Korean that have different types of glyphs where you might not be getting certain things breaking so in those situations you can use the all. I'm gonna turn this one off though because in general I would just say leave that one as is I'm gonna put this back to solid though because I don't particularly like the wavy one. Now we do have one more here which is text declaration line and line is interesting because right now our text declaration is an underline but if I wanted to I can actually make that an overline so it goes up top I can also do a line through which is like your strike through and it goes through your text as you'd expect and technically speaking there is a blink but you can see it just completely removed it new browsers will just prevent that from happening just like our old blink element that we used to have. Now an interesting thing with this one though is we can do an underline and an overline if you want. So if you want two lines on there for whatever reason or you could even come in here and do three lines if you really wanted to. You can set as many text declaration lines as you might need. If you're doing links I'm guessing you're not gonna bother with other ones you'd probably leave it as something like that but that's all an option and one thing you might have noticed is I did say this is actually all a shorthand or the text declaration itself is actually a shorthand and it is because I could say that let's just hit save here so it goes back to normal and I'm gonna say it's 12 pixels let's do something different so we'll just say wavy we'll do an overline and we're gonna make it be let's just say orange red for the color so it's a little bit different and you can see that worked and like any good shorthand the order here doesn't matter so I could put this first and I could have 12 pixels at the end and I could move my wavy over here and as long as they're all there then it works or I could switch this to an underline and it's gonna go under and so on and so forth now some of these are default values so let me just move this out of the way a little bit but if I take off the 12 pixels here you can see it just goes to the default size same if I take off wavy it goes just to the regular one but if I only have an orange red then obviously it just breaks the whole thing and I think the one that you at minimum have to declare is the line so I could say underline and then it's gonna work but if you do use the shorthand here just make sure usually this is where we throw a none so it will default to none if you declare other stuff in here for the line so if you still wanna use the shorthand you do have to declare the line that you're gonna be using and just really quickly before we get to the last one which might be my favorite one that we're gonna look at for the best control anyway but before we get to it just really fast if you'd like these types of CSS tricks and tips and other things which is basically everything that I do here at my channel and you don't wanna miss out on anything I do and you'd like to know other resources and other awesome CSS stuff and all of that I do have a weekly Sunday newsletter that I send out where I also talk about just front end development general musings and other stuff and it's extra content I mean if that sounds good to you there is a link down below to the newsletter I know not everyone wants more emails in their inbox but if you don't mind one extra one every Sunday that's just full of CSS goodness you might be interested in subscribing to it so yeah, link is down there if you are interested but if that's not what you're after and you wanna know what this next property is well that's fine too because we're gonna keep on going right now now there is something though the last thing we're gonna look at here is we're gonna turn off the shorthand just cause it's easier to read this in demo world where I can shrink this down and have everything visible in one screen but there is one thing that is not part of the shorthand that is maybe the one that you want the most which is a little bit weird and there's a reason why it's not part of the shorthand and that's because it's not a text declaration property but it's a text underlying property and it's text underlying offset and let's just make a really big one here one REM and you can see it's moved down I guess I always said I said REM just like in the beginning I wanted M to really move it down a lot moves a lot cause when M is matching a font size and it's a big font size so yeah you can move your line around using this which is something a lot of people like and you'll notice even though by default if I put this to zero we have the skip ink that's coming on and it's skipping anywhere it's touching it so all the round characters it happens to be touching cause obviously there was a default offset here but if it's touching any characters it's going to skip the ink if it's not touching them it's not gonna make that break and it didn't mean to push it down that far but it only will skip the ink if it's touching the characters which is super useful but yeah text underlying offset which is one I never remember and have to look up every time I wanna use it cause it's weird cause we have the decoration style, decoration line but there's a specific reason that it's text underlying offset is you can only control your underline with it you can not control the line through or the over line those ones are where they are so if I were to switch this to an over line and I wanted to move it it doesn't move if I wanted to change this to an over line that doesn't exist I don't know why you over line it's not something we see very often anyway so but yeah there we go your underline text underlying offset you can control the thickness of it you can control the color of it it's all wonderful and it makes our lives so much easier than using a pseudo elementary border or something weird and it's just gonna work all the time but other than internet explorer it's supported in all the major browsers and it's supported quite far back so basically everyone's going to be getting whatever you style here and that's how you get the full control over your links that maybe you didn't even know you wanted but now you know you can so you'll probably use it at least from time to time and if you enjoyed this video and you're newer to CSS I've done a video that looks at a lot of the essential properties and values for just styling text in general cause there's a lot of stuff there and some of it's more important than others so I did sort of an overview of the stuff you really need to know or if you're a little bit more advanced you need like little tips and tricks and other things that are definitely more advanced I recently did a look at a video that's taking a look at an alternative to the common sort of container or wrapper classes that sort of dives into a bit of a rabbit hole that I fell down that was a lot of fun and both of those videos are right here for your viewing pleasure and with that I would like to thank my enablers of awesome Andrew, Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner of the internet just a little bit more awesome