Casey Whitcher Profile
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

How To Create That Thick Underline Effect?

tall-underline-title-effect
CSS
Casey Whitcher Profile
By
Casey Whitcher
Show Some Love, Share!
Share on facebook
Share on twitter
Share on linkedin

Post Contents

What is that tall underline effect?

There are a few ways to pull this off, but this is my personal favorite, and it's easy to set globally!

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

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.

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!

2 Responses

  1. 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;
    }

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Articles

Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page

CSS

Flexbox Tricks Are An Elementor Game Changer

RELATED
Technical

GTM + WooCommerce + Facebook Pixel!

Crocoblock

The Big List Of Crocoblock Widgets

Crocoblock

See All JetTricks By Crocoblock On One Page