带有箭头的样式项目符号列表 [英] Style bullet-list with arrows

问题描述

我创建了一个箭头，我希望将其附加到列表中，而不是圆形的要点.我曾尝试使用:after但还没有成功，不得不承认我对伪元素非常陌生...

I have created an arrow that I would like to attach to a list instead of the round bullet points. I have tried to use the :after but haven't succeeded yet, have to confess that I'm very new to pseudo-elements...

这是我到目前为止所得到的:

Here's what I got so far:

#arrow {
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    transform: rotate(-45deg);
    margin-top:40px;
}



ul li {
	padding-bottom: 10px;
}

ul li:before{
   border-right:5px solid black;
   border-bottom:5px solid black;
   width:10px;
   height:10px;
   transform: rotate(-45deg);
   margin-top:40px;
}

<!-- Arrow below -->
<div id="arrow"></div>


<!-- Want to place arrow where bullet points are  -->
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ul>

有什么主意吗?

推荐答案

对伪元素(:before或:after)使用content: ''.并对ul使用list-style: none删除项目符号.喜欢:

Use content: '' with pseudo elements (:before or :after). And use list-style: none for ul to remove the bullets. Like:

ul {
  list-style: none;
}

ul li:before{
   content: '';
   position: absolute;
   border-right:2px solid black;
   border-bottom:2px solid black;
   width:10px;
   height:10px;
   top: calc(50% - 4px);
   left: -20px;
   transform: translateY(-50%) rotate(-45deg);
}

看看下面的代码段:

#arrow {
    border-right:2px solid black;
    border-bottom:2px solid black;
    width:10px;
    height:10px;
    transform: rotate(-45deg);
    margin-top:40px;
}



ul li {
  position: relative;
	padding-bottom: 10px;
}

ul {
  list-style: none;
}

ul li:before{
   content: '';
   position: absolute;
   border-right:2px solid black;
   border-bottom:2px solid black;
   width:10px;
   height:10px;
   top: calc(50% - 4px);
   left: -20px;
   transform: translateY(-50%) rotate(-45deg);
}

<!-- Want to place arrow where bullet points are  -->
<ul>
  <li>Item #1</li>
  <li>Item #2</li>
  <li>Item #3</li>
  <li>Item #4</li>
  <li>Item #5</li>
</ul>

希望这会有所帮助！

这篇关于带有箭头的样式项目符号列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！