cool headings

some-text.html

<h1>Cool text</h1>

some.js

const headings = document.querySelectorAll('h1,h2,h3,h4,h5,h6');

let styles = ``;
headings.forEach(heading => {
  console.log(heading);
  const rando = `x${Math.floor(Math.random() * 16777215).toString(16)}`;
  heading.classList.add(rando);
  const text = heading.textContent.replace(`'`, `\\'`);
  styles += `.${rando}:after { content: '${text}';}`;
});

const style = document.createElement('style');
style.textContent = styles;
document.body.appendChild(style);

some.styl

h1,h2,h3,h4,h5,h6
  color alpha(red, 0.8)
  font-weight normal
  line-height: 0.8
  letter-spacing -2px;
  line-height auto
  text-shadow 6px 6px 1px alpha(black, 0.05)
  font-family: 'Bevan', sans-serif;
  font-family: 'Carter One', sans-serif;
  position relative
  text-align center
  &:after
    position: absolute
    left 0
    top 0
    color yellow
    z-index: -1
    transform skew(-2deg) translateX(-20px)
    font-style italic
    text-shadow none
    width: 100%