How to keep the underline effect in this demo stay using CSS?

Problem

I'm a beginner in CSS, and I would like to know how to keep the underline effect (when hovering over links in this demo) permanent. I can use jQuery or javascript to have a focus on the element, but I would like the underline to stay even after mouse focus has been shifted. Thank you.

    <section class="blue-green">
    <nav id="cl-effect-4" class="cl-effect-4">
        <a id="focus-this" href="index.html">+ Create New</a>
        <a href="launch_approved.html">Launch Approved Campaigns</a>
        <a href="pending.html">Pending Approval</a>
        <a href="record.html">Your Campaign Record</a>
    </nav>
    </section>
Problem courtesy of: user1330974

Solution

You can fire a hover event with JQuery when you hover over your anchor tags that would add a class:

JQuery

$("a").hover(
  function () {
    $(this).addClass('focus-this');
  }
);

Additional CSS

.focus-this{border-bottom:5px solid white;}

Fiddle

Solution courtesy of: MathiasaurusRex

Discussion

Do your JQuery like this,

 $("#focus-this").hover(

 function () {
     $(this).focus(); }, function () {
     $(this).hover(); });

Here is a working Fiddle for you!

Discussion courtesy of: Murshid Ahmed

This recipe can be found in it's original form on Stack Over Flow.