How i can delete text inside li testimonial widget

Hello,

I wish to delete text “previous” and “next” below arrows icons inside testimonial widget.

I tried with jQuery in many ways :

$('li.flex-nav-prev').html('');

or

$('li.flex-nav-prev > a').html('')

or

jQuery('flex-nav-prev > a').contents().filter(function(){
      return (this.nodeType == 3);
}).remove();

This is my html code :

<div>
   <ul class="flex-direction-nav">
       <li class="flex-nav-prev">
         <a class="flex-prev" href="#">Previous</a>
       </li>

       <li class="flex-nav-next">
         <a class="flex-next" href="#">Next</a>
       </li>
  </ul>
 </div>

But it doesn’t work.

Thank you so much

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

To remove these arrows, kindly add the following sample CSS code to your site.

.flex-direction-nav .flex-prev,.flex-direction-nav .flex-next{content:"";}

Thanks!
Colorlib Support Team

Hi Mike,

How are you today ?

Thank you for this answer but i don’t want remove arrows but just the text “previous” and “next” below the arrows.

It’s possible ?

Hi

Please provide a link to this page

Hi Noda,

The link :

hey there
Please add this CSS in appearance - customize - additional CSS

.flex-direction-nav li a:before {
visibility: visible;
}

.flex-direction-nav li a {
visibility: hidden;
}

Thanks!
Colorlib Support Team

It works !

Thank you Noda

Can you explain me the difference between flex-direction-nav li a:before and flex-direction-nav li a ?

Why use visibility:visible on the first and visibility: hidden on the second ?

hey there

“flex-direction-nav li a:before and flex-direction-nav li a ?” - :before is pseudo-element and its an icon we want to leave visible,
li a is next prev text we want to hide in the li class

You can change position it will work anyway :slight_smile: