White Arrow icon
Back to all Elements

Thick Underline

An editable thick underline for your Headlines

This is a fairly simple way to add a thick underline to your elements.

We use here 2 interesting tricks:

  1. We Create a background gradient which both colors are positioned at the same point. This way there's no "gradient transition" at all, and the background seems like 2 different colors.
Gradient without "gradient"
  1. Creating a <span> element inside the <H1> element (the span could be created inside any element). This way the background is kept relative to each line.
Span inside the H1

Preview:

browser mockup
Share:
Heart icon

Try avoiding using "Transition: All". It is heavy on the browser's engine.

Might also interest you:

CMS Autocomplete

Cloneable
CMS
JavaScript

A short JavaScript code for transferring a CMS list into an autocomplete on an input field.

Read more
Blue arrow iconWhite Arrow icon

Auto get Current Year

Cloneable
Code
JavaScript

Automatically insert the current year to any element with the class of 'year'

Read more
Blue arrow iconWhite Arrow icon

Scroll Menu to Current Link

Cloneable
CMS
Code

Using JS to scroll a div (menu) to the current link inside.

Read more
Blue arrow iconWhite Arrow icon