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!
4 Responses
Hi,
I used to do this with linear gradients (bottom to top, 90dg, color to transparant with 50%/50% harsh transition), but this method is much quicker indeed!
Thanks for sharing!!!
You can create multiple styles for multiple font-sizes or you can use CSS calc functions to define the line thickness based on the fontsize in the root.
Here is my CSS (with comments)
/* here I define 3 CSS variables in the root element:
The first one is the font-size: 30px in this example.
I divide font-size by 2 and I store it in a second variable –ht. In this case it will be 15px. I need a third variable because the final output must be a negative value (box-shadow inset is a negative value). I use a trick to turn a positive value into a negative one. (-1 * value) */
:root {
–fs: 30px;
–ht: calc(var(–fs) / 2 );
–th : calc(-1 * var(–ht));
}
/* I target the text and call the variables from the root element */
.underlined-text span {
font-size: var(–fs) !important;
padding:0 .2em;
box-shadow: inset 0 var(–th) yellow;
}
Now I can change the fontsize in the root and the thickness of the line will change automaticaly with it. The most interesting part about this is that you don’t need media queries either. You don’t have to define the font-size in the root of each media query when you use CSS clamp.
You can add a clamp property that you can store in the first variable –fs which will make your type responsive fluid!
Clamp is my favourite new CSS property, well supported by all modern browsers.
Read more about it here (it’s a long read, but it’s well worth it):
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
And use this sandbox tool to define the minimum and maximum font-size based on a minimum and maximum viewport port. Set the values and copy paste the CSS.
https://codesandbox.io/s/clamp-linear-intepolation-based-on-viewport-width-builder-xgkft
Here is my testpage, I used your method but I made it 100% responsive fluid 🙂
https://franktielemans.be/blog/text-underline-thick
Greets,
Kep up the good work!
Here is my CSS:
:root {
–fs: clamp(1rem, 0.1346rem + 3.8462vw, 3.5rem);
–ht: calc(var(–fs) / 2 );
–th : calc(-1 * var(–ht));
}
.underlined-text span {
font-size: var(–fs) !important;
padding:0 .2em;
box-shadow: inset 0 var(–th) yellow;
}
This is awesome, thank you for the comments! Glad it worked for you and you gave me some new ideas too!
Hi Frank & Casey,
An old post with a very interesting solution to what I was looking for in Elementor. Since I’m very basic in CSS I took the CSS at the end and pasted it into the “Additional CSS” in my Elementor Free to see what would happen to my underlines. If I undertand the code, they should become Yellow. I do not get anything. Im trying to get a semi transperent 0.5rem behind my underlined text that is moved 0.25rem up behind the text and 0.25 rem to the right (for effect).
I sthis even a solution for what I am looking for?
Hey Matt,
Yes, this still works. You can even do this right in the section of the text itself without all the fancy external CSS classes, although I would recommend using classes so you can change it globally and use it easier.
We can code it right within an item with something like this.
That will prove that it’s working, so we just need to ensure that we’re calling the CSS correctly. I’ll usually play around in inspector to make sure I have the code right, and then copy that over to my sheets. Within the extra CSS Section of an elementor module you would need to be sure you’re using their “selector” functionality, I try to avoid that like the plague personally, but you’d need it to add the code there.