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

大佬教程收集整理的这篇文章主要介绍了将 li 元素的样式更改为 V 形，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决将 li 元素的样式更改为 V 形？

我目前正在创建一个列表，它应该代替默认元素 ● 想要像示例照片中的 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;
      }
}

我想要的

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

Example

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

解决方法

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" />

<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 元素的样式更改为 V 形全部内容，希望文章能够帮你解决将 li 元素的样式更改为 V 形所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。