<div class='box'>
  <h1 class='heading'>The ringing in my ears is from another life.</h1>
<div class='box'>
   <h2 class='[  heading  heading--2  ]'>The world is quiet here.</h2>
<blockquote class='[  box  box--wide  ]'>
   <p class='[  heading  heading--3  ]'>I believe every material has a grain, including the web. But this assumption flies in the face of our expectations for technology. Too often, the internet is cast as a wide-open, infinitely malleable material.</p>
    &mdash;<cite><a href='https://frankchimero.com/writing/the-webs-grain/'>Frank Chimero</a></cite>
/* Demo page styling: */

body {
  padding: 4rem;

.box {
  padding: 2rem;
  max-width: 14rem;
  background-color: #f2f2f2;

.box--wide {
  max-width: 50rem;

* {
  margin: 0;
  padding: 0;

* + * {
  margin-top: 2rem;

/* The good stuff: */

:root {
  /* The intrinsic width of the underline stroke (in pixels). This is 
   * the same as the height of the cap images. Don't specify the
   * units! This is because of some of the calculations we do later on. */
  --underline-intrinsic-width: 8;
  /* The actual width of the underline stroke we want to render (in pixels).
   * You can modify this, and the sizing and positioning should be calculated
   * accordingly. Again, Don't specify the units! */
  --underline-width: 12;
  /* The colour used to draw the underline. It should match the colour
   * used in the cap images... unfortunately we can't modify the SVG
   * fill via CSS because it's a background image. */
  --underline-color: #f1a1e3;
  /* We need to know the width of the cap images so that we
   * can position everything on the x axis accordingly. */
  --underline-cap-width: 4px;
  /* The border is positioned relative to the bottom of the line.
   * We can move it upwards a little to create an overlap effect. */
  --underline-offset-y: -2px;
  /* The padding to add to the x axis. By default, the caps would be
   * aligned with the beginning and end of the line. */
  --underline-padding-x: 0.12em;
  /* The cap images to use that form the left and right rounded
   * shape. I guess these could be any shape, they don't
   * necessarily have to be round 🙂.
  --cap-image-left: url(https://files-d4s40otz1.now.sh/left.svg);
  --cap-image-right: url(https://files-4vvqilj8v.now.sh/right.svg);
.heading {
  display: inline;
  --underline-width-scale: calc(var(--underline-width) / var(--underline-intrinsic-width));
  padding: 0 calc(var(--underline-padding-x) + calc(var(--underline-cap-width) * var(--underline-width-scale)));
  box-decoration-break: clone;
  background-repeat: no-repeat;
  color: #1221ff;
    linear-gradient(180deg, var(--underline-color), var(--underline-color)),
    calc(var(--underline-cap-width) * var(--underline-width-scale)),
  background-position-y: calc(100% - var(--underline-offset-y) * -1);
    calc(100% - calc(var(--underline-cap-width) * var(--underline-width-scale) * 2)) calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px),
    auto calc(var(--underline-width) * 1px);

.heading--2 {
  --underline-width: 8;
  --underline-offset-y: -2px;

.heading--3 {
  font-size: 3rem;
  font-weight: bold;
  --underline-width: 20;
  --underline-offset-y: -2px;
  --cap-image-left: url(https://files-6lc03kjqt.now.sh/left-2.svg);
  --cap-image-right: url(https://files-e7gkh52mq.now.sh/right-2.svg);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.