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>

<p>Ghostbusters II is a 1989 American <a href="#"><span>supernatural</span></a> <a href="#"><span>comedy film</span></a> produced and directed by <a href="#"><span>Ivan Reitman</span></a>. It is the sequel to the 1984 film <a href="#"><span>Ghostbusters</span></a> and follows the further adventures of a group of <a href="#"><span>parapsychologists</span></a> and their organization which combats <a href="#"><span>paranormal</span></a> activities.</p>

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;
}

p {
    font-family: "Georgia", serif;
    font-size: 22px;
    line-height: 33px;
}

p a {
    text-shadow: 2px 1px 0 #fff, -2px 1px 0 #fff;
}

p a > span {
    display: inline-block;
    line-height: 19px;
    border-bottom: 1px solid #555;
}