JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="dlist">
    <li><a href="www.google.com/result.html" >Link HTML</a></li>
    <li><a href="www.google.com/result.pdf" >Link PDF</a></li>
    <li><a title="wkr0006.pdf" class="lnk_document" target="_blank" href="http://feed.ne.cision.com/client/waymaker1/WOLReleaseFile.aspx?id=2080881&amp;fn=wkr0006.pdf">wkr0006.pdf</a></li>
    <li>foo</li>
</ul>    
<br />
<br />
<br />
<ul class="foobar">
    <li><a href="www.google.com/result.html" >Link HTML</a></li>
    <li><a title="wkr0006.pdf" class="lnk_document" target="_blank" href="http://feed.ne.cision.com/client/waymaker1/WOLReleaseFile.aspx?id=2080881&amp;fn=wkr0006.pdf">wkr0006.pdf</a></li>
</ul>

CSS

a { display: block; }

a.html { color: red; text-decoration: underline; }

a.pdf{ color: orange; text-decoration: none; }

ul.dlist li { display:block;   }

JavaScript

$(".dlist [href$='.html']").addClass('html');
$(".dlist [href$='.pdf']").addClass('pdf');