Underlined title
This guide will show you how to create colorful thick underlines for your titles.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_2slkw9.png)
Copy this code:
Paste it into your General settings > </body> custom HTML code section:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_11yj7g8.png)
Replace the color code with your own one (note that you should enter the same code twice):
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1kguznl.png)
Pick the title you want to edit and wrap it with these HTML tags:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_591crd.png)
Open the live version of your website to see the results:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1mkxzmd.png)
You can customize the thickness of the underline by editing this value:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1u3bbda.png)
For example, it can be 0.4em (thicker), or 0.1em (thinner).
You can move the underline up or down by editing this value:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_crpvlx.png)
For example, you can set it to 15px to move the underline up, or to 2px to move it down.
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_2slkw9.png)
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:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_11yj7g8.png)
Step 3/4
Replace the color code with your own one (note that you should enter the same code twice):
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1kguznl.png)
Step 4/4
Pick the title you want to edit and wrap it with these HTML tags:
<span class="custom-underline">Your Title</span>
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_591crd.png)
Done!
Open the live version of your website to see the results:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1mkxzmd.png)
Advanced customization
You can customize the thickness of the underline by editing this value:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1u3bbda.png)
For example, it can be 0.4em (thicker), or 0.1em (thinner).
You can move the underline up or down by editing this value:
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_crpvlx.png)
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
Thank you!