如何在html列表中的文本后面添加箭头？

<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

ul li::after {
  content: "→"; /* 插入箭头字符 */
  /* 或者使用以下代码插入箭头图标
  content: "";
  background-image: url(arrow.png);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: center;
  */
  margin-left: 5px; /* 调整箭头与文本之间的间距 */
  color: red; /* 调整箭头的颜色 */
}