将 li 元素的样式更改为人字形

Question

我目前正在创建一个列表，这应该而不是默认元素 ● 想要像示例照片中那样的 chevron right。但是，我不使用 bootstrap 而是 Bulma。有没有办法在没有 bootstrap 的情况下以某种方式获得它。我是用字符 > 做的。但是，这个不如 chevron right .

所以我的问题是如何在不使用 bootstrap 的情况下用这样的 '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

使用 ::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" />

Answer 2

你可以使用 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>

将 li 元素的样式更改为人字形

Change style of li element to an chevron

css

sass

stylesheet

html-lists