Skip to main content

A rounded & dashed underline

Add a nice rounded dashed underline to your text.

A text with a rounded dashed underline

p span {
--w: 20px; /* the width of dashes */
--h: 5px; /* the height of dashes */
--c: #4b9ed9; /* the color */

line-height: calc(1.2em + 2*var(--h));
padding-bottom: calc(2*var(--h));
background: bottom/calc(2*var(--w)) calc(2*var(--h)) space no-repeat;
--_g: calc(var(--w)/2) top 50%,var(--c) 90%,#0000 105%;
radial-gradient(var(--h) at left var(--_g)),
radial-gradient(var(--h) at right var(--_g)),
linear-gradient(90deg,#0000 calc(var(--w)/2),var(--c) 0 calc(3*var(--w)/2), #0000 0);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;

See the Pen Multi-line rounded dashes by Temani Afif (@t_afif) on CodePen.