将 li 元素的样式更改为 V 形

Question

我目前正在创建一个列表，而不是默认元素 ● 想要像示例照片中的 chevron right。但是，我不使用引导程序，而是使用布尔玛。有没有一个选项可以在没有引导程序的情况下以某种方式获得这个。我是用字符> 做的。不过这个不如chevron right好。

所以我的问题是如何在不使用引导程序的情况下用这样的“chevron right”替换字符“>”？

chevron right

html

<ul className="footer-link">
    <li>
        First 1
    </li>
    <li>
        Second 1
    </li>
    <li>
        Third 1
    </li>
</ul>

scss

.footer-link {
    ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
      }
      
      li {
        padding-left: 1em;
        text-indent: -1em;
      }
      
      li:before {
        content: ">";
        padding-right: 5px;
      }
}

我想要什么

这个例子中的人字形是等腰的，而且它以文字高度为中心。

Example

<i class="bi bi-chevron-right"></i>

Answer 1

你可以使用 font awesome 吗？

<script src="https://use.fontawesome.com/releases/v5.0.0/js/all.js"></script>

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-chevron-down"></i></span>First 1</li>
  <li><span class="fa-li"><i class="fas fa-chevron-down"></i></span>Second 1</li>
  <li><span class="fa-li"><i class="fas fa-chevron-down"></i></span>Third 1</li>
</ul>

Answer 2

使用::marker 伪元素怎么样？见https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

它似乎比较新，所以请记住浏览器支持：https://caniuse.com/css-marker-pseudo

一个例子：

ul li::marker {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
}

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>


<!-- This is just needed to that I can use FontAwesome here on SO -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />