如何从具有数字的链接中删除下划线，但在具有字母的普通链接上保持下划线

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>