Underlined title

This guide will show you how to create colourful thick underlines for your titles.

Step 1/4

Copy this code:

<style>
.custom-underline {
background-image: linear-gradient(0, #ffec78, #ffec78);
background-repeat: no-repeat;
background-size: auto 0.25em;
background-position: bottom 5px left;
}
</style>

Step 2/4

Paste it into your Settings -> General settings > Global <body> HTML code section:

Step 3/4

Replace the colour code with your own one (note that you should enter the same code twice):

Step 4/4

Pick the title you want to edit and wrap it with these HTML tags:

<span class="custom-underline">Your Title</span>

Done!

Open the live version of your website to see the results:

Advanced customization

You can customize the thickness of the underline by editing this value:

For example, it can be 0.4em (thicker), or 0.1em (thinner).

You can move the underline up or down by editing this value:

For example, you can set it to 15px to move the underline up, or to 2px to move it down.

Updated on: 20/04/2025

Was this article helpful?

Thank you!