How to remove underline from the link which has number but keep underline on normal link which has alphabets

Question

Please tell me How to remove underline from the link which has number but keep underline on normal link which has alphabets?

I created a demo here but not sure how to do this

 a{ text-decoration:underline; } /* TODO - Write code either with CSS or JS for the anchors which has text as number to NOT to have underline */ 

 <a href="#">Login</a> <a href="#">1111</a> <a href="#">2222</a> <a href="#">aavv1111</a> 

Answer 1

CSS does not have the capability to determine if the content of an element is numeric or not, so you will need to use JS.

You can attempt to parse the text content of each element to an integer. If it works, remove the underline otherwise, keep it. Try this:

 $('a').css('text-decoration', function(){ return isNaN(parseInt($(this).text(), 10)) ? 'underline' : 'none'; }); 

 a { text-decoration: underline; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#">Login</a> <a href="#">1111</a> <a href="#">2222</a> <a href="#">aavv1111</a> 

Answer 2

You could add another class on the links you don't want to have underlined if your content isn't dynamic or updated.

 a { text-decoration: underline; } a.nounderline { text-decoration: none; } 

 <a href="#">Login</a> <a href="#" class="nounderline">1111</a> <a href="#" class="nounderline">2222</a> <a href="#">aavv1111</a>