JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="colored"><a href="#"><span>parapsychologists</span></a></h1>

<h1 class="pretty"><a href="#"><span>parapsychologists</span></a></h1>

CSS

a {
    color: #333;
    text-decoration: none;
}

h1 {
    font-weight: normal;
    font-family: 'Georgia', serif;
    font-size: 2.5em;
    line-height: 50px;
}

h1 span {
    line-height: 35px;
    display: inline-block;
}

h1.colored {
    text-shadow: 2px 2px 0 red, -2px 2px 0 red;
}
h1.colored span {
    border-bottom: 2px solid blue;
}

h1.pretty {
    text-shadow: 2px 2px 0 #fff, -2px 2px 0 #fff;
}
h1.pretty span {
    border-bottom: 2px solid #999;
}
h1.pretty span:hover {
    border-bottom-color: #333;
}