<h1 data-content="bubblegum">bubblegum</h1>
@import url('https://fonts.googleapis.com/css?family=Sacramento');

html, body { 
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h1 { 
  position: relative;
  color: hsl(357, 85%, 80%);
  font-size: 180px; 
  font-family: 'Sacramento', cursive;
  letter-spacing: -1px;
}

h1::before {
  position: absolute;
  left: 0;
  top: 0;
}

/* Set the psuedoelement beneath parent */
h1::before {
  z-index: -1;
  content: attr(data-content);
  text-stroke: 10px hsl(357, 80%, 75%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/noahblon/pen/QYvmQe/caa6efe92005db0a8b9206328253c5cc.js