Feb 22, 2020

Back to all Elements

Thick Underline

An editable thick underline for your Headlines

Webflow Project Page (to Clone)

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

We use here 2 interesting tricks:

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"

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

Michael's Vsauce was my gateway Youtube channel to the world of fun educational vlogs. This was the 1st video I stumbled upon.

Might also interest you:

3d Video Slider (swiper.js)

Cloneable

CMS

JavaScript

A 3d slider with video items, plays and pauses on click & slide change.

Glossary

Cloneable

JavaScript

CMS

A clonable for creating an Alphabetical glossary

Dynamic Height

Code

Tricks

JavaScript

A (custom code) solution that combines CSS variables and Vanilla JavaScript for the shrinking / growing of browser top & bottom bars.