Trying to emulate Wired's linking style . . .

For a site I’m working on, I’d like to try to emulate Wired‘s linking style (the big “sky blue marker underline” that switches to the sky blue hi-lighter on hover) . . .

I found a couple of great tutorials and blog posts that go almost all of the way:

Wired-Style Underline
by Hyungtak Jun on March 2015
http://hjun.me/?p=836

.link-underline a {
    border-bottom: 3px solid #b4e7f8;
    box-shadow: inset 0 -5px 0 #b4e7f8;
    color: inherit;
    transition: background .15s cubic-bezier(.33,.66,.66,1);
}

.link-underline a:hover {
    background: #b4e7f8;
}

http://codepen.io/anon/pen/uFdys

https://gist.github.com/idmontie/29775aae1496b67d979f

https://www.snip2code.com/Snippet/388374/Wired-Style-A-Tag-Underlines

*those last 2 are the same code

http://chiefcreative.me/post/91105692838/wired-fat-highlighter-underline-link-style

. . . but then I keep having one last question:

Do I have to add the class (<a class="link-underline">)on every link that I create in every post or page I create on the website?! — There has to be another / better way to do it!

Is there a way to integrate it into the WP template?

Thanks (in advance) – cheers!
Tamara