Skip to main content

Slanted underline with hover effect

Add a slanted underline to your text with a nice hover effect using a simple code

text with slanted underline

<h2><span>Gingerbread jelly beans</span></h2>
h2 {
--a: -45deg; /* control the angle */
--t: .23em; /* thickness of the underline */
color: #F1D4AF;

h2 span {
--_s: calc(var(--t)*cos(var(--a)));
linear-gradient(var(--a),#0000 var(--_s),currentColor 0 calc(100% - var(--_s)),#0000 0)
bottom/var(--i,90%) var(--t) no-repeat;
padding: 0 .25em calc(var(--t) + .1em);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: .3s;
h2:hover span {
--i: 100%;

See the Pen CSS-only Slanted underline by Temani Afif (@t_afif) on CodePen.