How To Create That Thick Underline Effect?
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 —- */
box-shadow: inset 0 -.6em #0DBE8A;
/* —- end start text background —- */
A Word About Global CSS
Currently, I’m putting all of my CSS in the Global > Site Settings > Custom CSS field.
I try to never put CSS inside of widgets. It’s too easy to forget where they are, so I keep them in one location that’s easy to access.
So what am I actually doing here? By putting this in the Global Styles CSS, I can access this and apply it to any bit of text that I want anywhere on my site.
I can apply it to a full section, or just parts of a section.
So first, I added the comment section above my code that’s the /*… something —*/ part.
That will not show up on your site, but when you’re reading through all of your CSS it makes it easy to see what you’re looking at.
I created my class and told the CSS I want to apply the effect to anything that has the class kcs-text.
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
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.
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.
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
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
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!