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


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>
Problem courtesy of: user1330974


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


  function () {

Additional CSS

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


Solution courtesy of: MathiasaurusRex


Do your JQuery like this,


 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.