CSS Tip

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)));
  background:
    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.

More CSS Tips