<ul class="highlight-list">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  <li>项目四</li>
</ul>

.highlight-list {
  list-style: none;
  padding: 0;
}

.highlight-list li {
  padding: 10px;
  margin: 5px 0;
  background: #f5f5f5;
  position: relative;
  transition: all 0.3s ease;
}

.highlight-list li.highlighted {
  background: #e0f7fa;
  border-left: 4px solid #00bcd4;
}

.highlight-list li.highlighted::after {
  content: "→";
  position: absolute;
  right: 10px;
  color: #00bcd4;
  font-weight: bold;
}

$(document).ready(function() {
  $('.highlight-list li').click(function() {
    // 移除所有高亮
    $('.highlight-list li').removeClass('highlighted');
    // 为当前点击项添加高亮
    $(this).addClass('highlighted');
  });
});

$(document).ready(function() {
  $('.highlight-list li').hover(
    function() {
      $(this).addClass('highlighted');
    },
    function() {
      $(this).removeClass('highlighted');
    }
  );
});

$(document).ready(function() {
  var items = $('.highlight-list li');
  var current = 0;
  
  function highlightNext() {
    items.removeClass('highlighted');
    $(items[current]).addClass('highlighted');
    current = (current + 1) % items.length;
  }
  
  // 每2秒切换一次高亮
  setInterval(highlightNext, 2000);
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

.highlight-list li.highlighted::after {
  content: "\f061"; /* Font Awesome箭头图标代码 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 10px;
  color: #00bcd4;
}