JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="info__sort">
                  <li class="info__item">
                     Сортировка:
                     <ul class="info__sublist">
                        <li class="info__subitem"><a class="info__subitem--link" href="#">По цене</a></li>
                        <li class="info__subitem"><a class="info__subitem--link" href="#">По типу</a></li>
                        <li class="info__subitem"><a class="info__subitem--link" href="#">По рейтингу</a></li>
                     </ul>
                  </li>
               </ul>

CSS

.info__subitem .info__subitem--link {
  color: green;
}
.info__subitem:first-child .info__subitem--link {
  color: red;
}

.info__subitem:not(:first-child) .info__subitem--link{
    text-decoration: underline;
    -webkit-text-decoration-style: dotted;
            text-decoration-style: dotted;
    -webkit-text-decoration-color: rgba(0, 0, 0, 0.5);
            text-decoration-color: rgba(0, 0, 0, 0.5);
}
 .info__subitem .info__subitem--link:hover {
    color: #81b3d2;
}
.info__subitem .info__subitem--link:active {
    color: #000000;
}