JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<a data-content="foo">foo</a>

CSS

a {
    font-size: 100px;
    position: relative;
}

a:before,
a:after {
    content: attr(data-content);
    left: 0;
    position: absolute;
    top: 0;
}

a:after {
    background-image: -webkit-gradient(linear, left top, left bottom, from(red), to(orange));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a:before {
    color: transparent;
    text-shadow: 0 0 2px green;
}