*,
*:after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(210 30% 24%);
}

h1 {
  font-size: clamp(3rem, 15vmin, 8rem);
  font-family: sans-serif;
  color:hsl(180, 0%, 98%) ;
}

.underlined {
/*   background: red; */
  position: relative;
}

.underline-mask:after {
  content: '';
  position: absolute;
  top: 95%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(0, 0%, 98%);
  /* Use a conic gradient mask to hide and show the bits you want */
  --spread: 140deg;
  --start: 290deg;
  -webkit-mask: conic-gradient(from var(--start), white 0 var(--spread), transparent var(--spread));
          mask: conic-gradient(from var(--start), white 0 var(--spread), transparent var(--spread));
}


.underline-overflow {
	
  display: inline-block;
  /* A little extra padding and overflow hidden   */
  overflow: hidden;
  padding-bottom: clamp(1rem, 2vmin, 2rem);
}
.underline-overflow:after {
  content: '';
  position: absolute;
  top: 100%;
  height: 150%;
  aspect-ratio: 2.5 / 1;
  left: 50%;
  transform: translate(-50%, -10%);
  border-radius: 50%;
  border: 6px solid hsl(10 80% 50%);
}

.underline-clip:after {
  content: '';
  position: absolute;
  top: 100%;
  width: 150%;
  aspect-ratio: 3 / 1;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  border: 6px solid hsl(130 80% 50%);
  /* Use a clip-path to hide and show the bits you want */
  -webkit-clip-path: polygon(0 0, 50% 50%, 100% 0);
          clip-path: polygon(0 0, 50% 50%, 100% 0);
}