<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%);
}
This Pen doesn't use any external CSS resources.