How To Create That Thick Underline Effect?
Post Contents
What is that tall underline effect?
Spoiler Alert... It's Not An Underline.
This could pretty easily be confused with the CSS style, text-decoration-thickness: 5px; etc.
The biggest problem with that is that it’s not really supported on many browsers, so much so that I can’t even test it, call me a browser snob, but I prefer lazy.
What CSS Works?
This is an easy method that can be applied anywhere.
We’re going to create a class that we can pretty much apply to anything on our site.
We could name our class whatever we want, for the sake of this tutorial, I’m going to call mine kcs-text (I’m KC, so…)
My code is going to look like this:
/* —- start text background —- */
.kcs-text{
padding:0 .2em;
box-shadow: inset 0 -.6em #0DBE8A;
}
/* —- end start text background —- */
A Word About Global CSS
The Padding
So this is really optional. Padding allows you to add padding to an element in this order: TOP RIGHT BOTTOM LEFT
To make things easy, if we only put the first two numbers it will apply the first one to top and bottom and the second one to right and left.
So, this is adding just a smidge of padding to the right and left of the section so that background doesn’t have a hard cutoff right on the text.
The Box Shadow
Inset
The first thing we’re going to add is the inset. This is going to apply the shadow to the inside of the element instead of the outside.
Distance
Next, the box-shadow gives you two numbers to control. The first number is the distance you want your “shadow” to move to the right. It’s designed for you to have a shadow that goes over to the right and down.
The second number is, you guessed it, how far down do you want your “shadow” to go?
There is actually a third number that you could use, and if this were actually a shadow we would.
The third number is the blur amount which gives you that cool faded shadow look.
For our purposes we don’t want that fade, we want a nice solid shape that resembles a thick underline, so we’ll leave that empty.
Color
Finally, we get to pick the color of our background. Be sure to use something that is going to provide a nice contrast with your text, both on and off of the background.
Using Your New Style
So there are a couple of ways we can apply this. We could apply it directly to our element, be it a header, or body text.
The other way we can do this is to put the class on a section of text within a paragraph.
The way we will do this is to add a span around the part of the text we want to add our style to. Then we will assign our class to that span.
Things To Consider
The biggest issue with this is that if you want the underline to be bigger, or a different color, you will need to adjust it in the CSS.
If you want to have different colors or sizes for different elements, just create a separate style for those.
This can get a little tricky if you have a heading with a big bottom. The background will start at the bottom of the element so it will be too low on your text.
You can get around this a few ways. The easiest I’ve found is to just lose the bottom margin or padding. Then you will just add a top margin or padding to the element below it.
Also, this effect will stretch the length of your headline. If your headline is 100% wide you will get something like this:
100% Width Headline
vs.
Custom Width Headline
If you want this to only be the length of your headline you will need to set the width.
You can do this by selecting your headline, then Advanced > Position > Width > Custom
Final Thoughts
So this is a pretty basic way to do this and I know there are a bunch of others, but I’ve found this to be the fastest.
Do you have a better method?
Maybe one that works and starts at the bottom of the text regardless of the bottom margin?
Drop me a comment below!
