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

Step 1/4

Copy this code:

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

Step 2/4

Paste it into your Website settings > Custom code > <body> section:

Step 3/4

Replace the color 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>


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.
Was this article helpful?
Thank you!