Articles on: Custom extensions

Underlined title

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 General settings > </body> custom HTML code 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.

Updated on: 18/12/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!