<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas sapiente optio quos libero sint blanditiis. Aliquam adipisci rerum non? Illo aspernatur nisi quaerat quo animi! Libero veritatis et quam quaerat.</p>
@supports (height: 1lh) and (-webkit-background-clip: text) {
  p {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to bottom, red 1lh, blue 1lh, blue);
    background-size: 100% 2lh;
  }
}

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
}

p {
  color: red;
  text-wrap: balance;
  max-inline-size: 30ch;
  font: 300 140%/1.8 system-ui;
}

// sub,
// sup {
//   font-size: 75%;
//   line-height: 0;
//   position: relative;
//   vertical-align: baseline;
// }
// sub {
//   bottom: -0.25em;
// }
// sup {
//   top: -0.5em;
// }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.