This guide will show you how to create colorful 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 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>



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