A rounded & dashed underline

Add a nice rounded dashed underline to your text.

• No SVG, No image
• No extra element
• No pseudo-element
• Works with multi-lines of text
• Easy to update using CSS variables

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

• Previous CSS Tip
• Next CSS Tip