带箭头的样式子弹列表

Question

我创建了一个箭头,我想附加到列表而不是圆形的子弹点.我试图使用:之后但还没有成功,不得不承认我对伪元素很新...

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

#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>

谁有任何想法？

Answer 1

不直接回答提出的问题，但希望对一些像我一样从搜索中发现这个问题的人有用！

使用与其他答案大致相同的想法，但使用更简单的::before伪元素，您可以使用任何 unicode 箭头字符作为您的项目符号，而不是搞乱 div 上的边框：

ul {
  position: relative;
  list-style: none;
}

li::before {
  content: '?';
  position: absolute;
  left: 0;
}

这里是一个 unicode 箭头列表，所以你可以找到你喜欢的东西：http : //xahlee.info/comp/unicode_arrows.html

Answer 2

使用content: ''与伪元素(:before或:after).并list-style: none用于ul删除子弹.喜欢:

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>

希望这可以帮助!

Answer 3

更现代（2021）的方法是：

注意：居中和颜色是可选的。

ul {
  list-style-type: none
}

li {
  display: grid;
  grid-template-columns: 20px auto;
  justify-content: start;
  align-items: center;
}

li::before {
  content: ">";
  font-size: 10px;
  color: #999;
}

<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>